在网上看到很多做的非常漂亮的menu，感觉非常不错，今天就在这儿学做一个menu。
其效果如图1所示：（源代码在最下方，可以下载）
图 1
并且，该菜单仅仅用到了html和CSS，以下是其源码：
html源码：（很简单，不解释）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<link rel="stylesheet" type="text/css" href="style.css" />
<body>
<ul id="menu">
<li><a href="#">Home</a></li>
<li>
<a href="#">Categories</a>
<ul>
<li><a href="#">CSS</a></li>
<li><a href="#">Graphic design</a></li>
<li><a href="#">Development tools</a></li>
<li><a href="#">WEb design</a></li>
</ul>
</li>
<li><a href="#">Work</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</body>
</html>
html的代码如上所示。
CSS的代码如下所示：
@charset "utf-8";
/* CSS Document */
/* Main */
#menu{ /*通过ID，寻找ID为menu的DOM*/
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #111;
background: -moz-linear-gradient(#444, #111);
/*【注释】1：线性渐变在Mozilla下的应用（即，采用Mozilla内核的浏览器，例如：Firefox、Flock等浏览器），本句话是指：采用线性渐变方式，起点颜色是#444，终点颜色是#111*/
/*【注释】2：线性渐变在Mozilla下的语法为：
--moz-linear-gradient([<point>||<angle>,]?<stop>,<stop> [,<stop>]*)
共有三个参数：第一个代表线性渐变的方向，top是从上到下，left为从左至右，如果定义为left top，则代表从左上角至右下角。
第二个、第三个参数分别代表起点颜色和终点颜色。也可以在他们之间插入更多的颜色，表示多种颜色的渐变。
*/
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
/*【注释】和上句话相同，只不过是指：线性渐变在Webkit下的应用（采用webkit内核的浏览器，例如safari、google浏览器）*/
/*【注释】：不过google在最新版本28.0.1469.0中已经将Webkit内核替换为Blink内科，不过Blink内核也是基于webkit内核引擎开发所得
时间：2013年4月15日19:09:11
*/
/*【注释】:CSS说明：
-webkit-gradient(<type>,<point> [,<radius>]?,<point> [,<radius>]? [,<stop>]*)
-webkit-gradient是webkit引擎对渐变实现的参数，是老式语法书写规则，最新式的语法书写规则是下面的-webkit-linear-gradient。
其共有5个参数：
第一个参数：代表类型，可以是线性渐变（linear）或径向渐变（radial）
第二个参数、第三个参数：是一对值，非别代表渐变起点和渐变终点。可以用坐标形式标识，也可以用关键值表示。
第四、五个参数：分别是两个color-stop函数。color-stop函数接受两个参数，第一个表示渐变的位置，0为起点，0.5为中点，1为终点。第二个表示该点的颜色。
*/
background: -webkit-linear-gradient(#444, #111);
/*【注释】：这个不进行详细的介绍，和-moz-linear-gradient一样
语法形式：
-webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )
*/
background: -o-linear-gradient(#444, #111);
/*【注释】：不解释，同上。只不过是在Opera引擎下的应用。
语法形式：
-o-linear-gradient([<point> || <angle>,]? <stop>, <stop> [, <stop>])
*/
background: -ms-linear-gradient(#444, #111);
/*【注释】同上，是针对微软的IE9及以上浏览器*/
background: linear-gradient(#444, #111);
/*【注释】同上，这是无前缀的渐变，IE10也支持无前缀的渐变
参考文献：msdn上的文章：
题名：IE10 中的无前缀 CSS3 渐变
网址：http://blogs.msdn.com/b/ie_cn/archive/2012/06/27/css-gradients-in-ie10-release-preview.aspx
*/
-moz-border-radius: 50px;
border-radius: 50px;
/*【注释】：上面两个是将正方形的四个直角进行切割，变得圆滑*/
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
/*【注释】：上面的三个实现了对象实现图层阴影效果
具体的语法为：
box-shadow:inset x-offset y-offset blur-radius spread-radius color
其中：第一个参数（inset）：此处可有可无，即inset可以删掉。没有inset是指，投影在对象的外部，也是我们常见的，为默认值；若为inset，则，投影在对象的内部。
第二个参数：水平方向的偏移量。其值可正可负，若为正，代表投影在对象右侧；为负，在左侧；
第三个参数：垂直方向的偏移量。其值可正可负，若为正，代表投影在对象底侧；为负，在顶侧；
第四个参数：阴影模糊半径。其值只能为>=0，值越大，阴影越模糊。
第五个参数：阴影扩展半径。其值可正可负，值越大，阴影越大
第六个参数：阴影颜色。如果不设定任何颜色时，浏览器会取默认色，但各浏览器默认色不一样，特别是在webkit内核下的safari和chrome浏览器将无色，也就是透明，建议不要省略此参数。
各个浏览器对box-shadow的支持度：
IE9及以上、google浏览器2.0及以上、firefox3.5及以上，opera10.6及以上、safari4
*/
}
#menu li{
float: left;
padding: 0 0 10px 0;
position: relative;
}
#menu a{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
/*【注释】：呵呵，先说一个题外话：transformers是"变形金刚"电影的英文名称
言归正传：
text-transform -- 定义文本的大小写状态,此属性对中文无意义
其取值有5种：
capitalize: 首字母大写
uppercase: 大写
lowercase: 小写
none: 正常无变化
inherit: 继承
*/
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a{
color: #fafafa;
}
*html #menu li a:hover{ /* IE6 */
color: #fafafa;
}
#menu li:hover > ul{
display: block;
}
/* Sub-menu */
#menu ul{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu ul li{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a{
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a{ /* IE6 */
height: 10px;
width: 150px;
}
*:first-child+html #menu ul a{ /* IE7 */
height: 10px;
width: 150px;
}
#menu ul a:hover{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child a{
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child a:after{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul li:first-child a:hover:after{
border-bottom-color: #04acec;
}
#menu ul li:last-child a{
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
相关推荐
全国大学生智能汽车竞赛自2006年起，由教育部高等教育司委托高等学校自动化类教学指导委员会举办，旨在加强学生实践、创新能力和培养团队精神的一项创意性科技竞赛。该竞赛至今已成功举办多届，吸引了众多高校学生的积极参与，此文件为智能车竞赛介绍
字卡v4.3.4 原版 三种UI+关键字卡控制+支持获取用户信息+支持强制关注 集卡模块从一开始的版本到助力版本再到现在的新规则版本。 集卡模块难度主要在于 如何控制各种不同的字卡组合 被粉丝集齐的数量。 如果不控制那么一定会出现超过数量的粉丝集到指定的字卡组合，造成奖品不够的混乱，如果大奖价值高的话，超过数量的粉丝集到大奖后，就造成商家的活动费用超支了。我们冥思苦想如何才能限制集到指定字卡组合的粉丝数，后我们想到了和支付宝一样的选一张关键字卡来进行规则设置的方式来进行限制，根据奖品所需的关键字卡数，设定规则就可以控制每种奖品所需字卡组合被粉丝集到的数量，规则可以在活动进行中根据需要进行修改，活动规则灵活度高。新版的集卡规则，在此次政府发布号的活动中经受了考验，集到指定字卡组合的粉丝没有超出规则限制。有了这个规则限制后，您无需盯着活动，建好活动后就无人值守让活动进行就行了，您只需要时不时来看下蹭蹭上涨的活动数据即可。 被封？ 无需担心，模块内置有防封功能，支持隐藏主域名，显示炮灰域名，保护活动安全进行。 活动准备？ 只需要您有一个认证服务号即可，支持订阅号借用认证服务号来做活动。如果您
出口设备线体程序详解：PLC通讯下的V90控制与开源FB284工艺对象实战指南,出口设备线体程序详解：PLC通讯与V90控制集成，工艺对象与FB284协同工作，开源学习V90控制技能,出口设备1200线体程序，多个plc走通讯，内部有多个v90,采用工艺对象与fb284 共同控制，功能快全部开源，能快速学会v90的控制 ,出口设备; 1200线体程序; PLC通讯; 多个V90; 工艺对象; FB284; 功能开源; V90控制。,V90工艺控制：开源功能快，快速掌握1200线体程序与PLC通讯
基于Arduino与DAC8031的心电信号模拟器资料：心电信号与正弦波的双重输出应用方案,Arduino与DAC8031心电信号模拟器：生成心电信号与正弦波输出功能详解,基于arduino +DAC8031的心电信号模拟器资料，可输出心电信号，和正弦波 ,基于Arduino;DAC8031;心电信号模拟器;输出心电信号;正弦波输出;模拟器资料,基于Arduino与DAC8031的心电信号模拟器：输出心电与正弦波
MATLAB口罩检测的基本流程 图像采集：通过摄像头或其他图像采集设备获取包含面部的图像。 图像预处理：对采集到的图像进行灰度化、去噪、直方图均衡化等预处理操作，以提高图像质量，便于后续的人脸检测和口罩检测。 人脸检测：利用Haar特征、LBP特征等经典方法或深度学习模型（如MTCNN、FaceBoxes等）在预处理后的图像中定位人脸区域。 口罩检测：在检测到的人脸区域内，进一步分析是否佩戴口罩。这可以通过检测口罩的边缘、纹理等特征，或使用已经训练好的口罩检测模型来实现。 结果输出：将检测结果以可视化方式展示，如在图像上标注人脸和口罩区域，或输出文字提示是否佩戴口罩。
1、文件内容：kernel-debug-devel-3.10.0-1160.119.1.el7.rpm以及相关依赖 2、文件形式：tar.gz压缩包 3、安装指令： #Step1、解压 tar -zxvf /mnt/data/output/kernel-debug-devel-3.10.0-1160.119.1.el7.tar.gz #Step2、进入解压后的目录，执行安装 sudo rpm -ivh *.rpm 4、更多资源/技术支持：公众号禅静编程坊
该文档提供了一个关于供应链管理系统开发的详细指南，重点介绍了项目安排、技术实现和框架搭建的相关内容。 文档分为以下几个关键部分： 项目安排：主要步骤包括搭建框架（1天），基础数据模块和权限管理（4天），以及应收应付和销售管理（5天）。 供应链概念：供应链系统的核心流程是通过采购商品放入仓库，并在销售时从仓库提取商品，涉及三个主要订单：采购订单、销售订单和调拨订单。 大数据的应用：介绍了数据挖掘、ETL（数据抽取）和BI（商业智能）在供应链管理中的应用。 技术实现：讲述了DAO（数据访问对象）的重用、服务层的重用、以及前端JS的继承机制、jQuery插件开发等技术细节。 系统框架搭建：包括Maven环境的配置、Web工程的创建、持久化类和映射文件的编写，以及Spring配置文件的实现。 DAO的需求和功能：供应链管理系统的各个模块都涉及分页查询、条件查询、删除、增加、修改操作等需求。 泛型的应用：通过示例说明了在Java语言中如何使用泛型来实现模块化和可扩展性。 文档非常技术导向，适合开发人员参考，用于构建供应链管理系统的架构和功能模块。
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
C#与VB实现欧姆龙PLC的Fins TCP通信案例源码：调用动态链接库进行数据读写，定时器与计数器数据区的简洁读写操作示例,C#与VB实现欧姆龙PLC的Fins TCP通信案例源码：调用动态链接库进行读写操作，涵盖定时器计数器数据区学习案例,C#欧姆龙plc Fins Tcp通信案例上位机源码，有c#和VB的Demo，c#上位机和欧姆龙plc通讯案例源码,调用动态链接库，可以实现上位机的数据连接，可以简单实现D区W区定时器计数器等数据区的读写，是一个非常好的学习案例 ,C#; 欧姆龙PLC; Fins Tcp通信; 上位机源码; 动态链接库; 数据连接; D区W区读写; 定时器计数器; 学习案例,C#实现欧姆龙PLC Fins Tcp通信上位机源码，读写数据区高效学习案例
可调谐石墨烯超材料吸收体的FDTD仿真模拟研究报告：吸收光谱的化学势调节策略与仿真源文件解析,可调谐石墨烯超材料吸收体：化学势调节光谱的FDTD仿真模拟研究,可调谐石墨烯超材料吸收体FDTD仿真模拟 【案例内容】该案例提供了一种可调谐石墨烯超材料吸收体，其吸收光谱可以通过改变施加于石墨烯的化学势来进行调节。 【案例文件】仿真源文件 ,可调谐石墨烯超材料吸收体; FDTD仿真模拟; 化学势调节; 仿真源文件,石墨烯超材料吸收体：FDTD仿真调节吸收光谱案例解析
RBF神经网络控制仿真-第二版
松下PLC与威纶通触摸屏转盘设备控制：FPWINPRO7与EBPRO智能编程与宏指令应用,松下PLC与威纶通触摸屏转盘设备控制解决方案：FPWINPRO7与EBPRO协同工作，实现多工位转盘加工与IEC编程模式控制,松下PLC+威纶通触摸屏的转盘设备 松下PLC工程使用程序版本为FPWINPRO7 7.6.0.0版本 威纶通HMI工程使用程序版本为EBPRO 6.07.02.410S 1.多工位转盘加工控制。 2.国际标准IEC编程模式。 3.触摸屏宏指令应用控制。 ,松下PLC; 威纶通触摸屏; 转盘设备控制; 多工位加工控制; IEC编程模式; 触摸屏宏指令应用,松下PLC与威纶通HMI联控的转盘设备控制程序解析
基于循环神经网络（RNN）的多输入单输出预测模型（适用于时间序列预测与回归分析，需Matlab 2021及以上版本）,基于循环神经网络（RNN）的多输入单输出预测模型（matlab版本2021+），真实值与预测值对比，多种评价指标与线性拟合展示。,RNN预测模型做多输入单输出预测模型，直接替数据就可以用。 程序语言是matlab，需求最低版本为2021及以上。 程序可以出真实值和预测值对比图，线性拟合图，可打印多种评价指标。 PS:以下效果图为测试数据的效果图，主要目的是为了显示程序运行可以出的结果图，具体预测效果以个人的具体数据为准。 2.由于每个人的数据都是独一无二的，因此无法做到可以任何人的数据直接替就可以得到自己满意的效果。 这段程序主要是一个基于循环神经网络（RNN）的预测模型。它的应用领域可以是时间序列预测、回归分析等。下面我将对程序的运行过程进行详细解释和分析。 首先，程序开始时清空环境变量、关闭图窗、清空变量和命令行。然后，通过xlsread函数导入数据，其中'数据的输入'和'数据的输出'是两个Excel文件的文件名。 接下来，程序对数据进行归一化处理。首先使用ma
1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
旅游管理系统中的功能模块主要是实现管理员；首页、个人中心、用户管理、旅游方案管理、旅游购买管理、系统管理，用户；首页、个人中心、旅游方案管理、旅游购买管理、我的收藏管理。前台首页；首页、旅游方案、旅游资讯、个人中心、后台管理等功能。经过认真细致的研究，精心准备和规划，最后测试成功，系统可以正常使用。分析功能调整与旅游管理系统实现的实际需求相结合，讨论了Java开发旅游管理系统的使用。 从上面的描述中可以基本可以实现软件的功能： 1、开发实现旅游管理系统的整个系统程序； 2、管理员；首页、个人中心、用户管理、旅游方案管理、旅游购买管理、系统管理等。 3、用户：首页、个人中心、旅游方案管理、旅游购买管理、我的收藏管理。 4、前台首页：首页、旅游方案、旅游资讯、个人中心、后台管理等相应操作； 5、基础数据管理：实现系统基本信息的添加、修改及删除等操作，并且根据需求进行交流查看及回复相应操作。
Boost二级升压光伏并网结构的Simulink建模与MPPT最大功率点追踪：基于功率反馈的扰动观察法调整电压方向研究,Boost二级升压光伏并网结构的Simulink建模与MPPT最大功率点追踪：基于功率反馈的扰动观察法调整电压方向研究,Boost二级升压光伏并网结构，Simulink建模，MPPT最大功率点追踪，扰动观察法采用功率反馈方式，若ΔP>0，说明电压调整的方向正确，可以继续按原方向进行“干扰”；若ΔP<0，说明电压调整的方向错误，需要对“干扰”的方向进行改变。 ,Boost升压;光伏并网结构;Simulink建模;MPPT最大功率点追踪;扰动观察法;功率反馈;电压调整方向。,光伏并网结构中Boost升压MPPT控制策略的Simulink建模与功率反馈扰动观察法
运行GUI版本，可二开
Deepseek相关主题资源及行业影响
WP Smush Pro 是一款专为 WordPress 网站设计的图像优化插件。 一、主要作用 图像压缩 它能够在不影响图像质量的前提下，大幅度减小图像文件的大小。例如，对于一些高分辨率的产品图片或者风景照片，它可以通过先进的压缩算法，去除图像中多余的数据。通常 JPEG 格式的图像经过压缩后，文件大小可以减少 40% – 70% 左右。这对于网站性能优化非常关键，因为较小的图像文件可以加快网站的加载速度。 该插件支持多种图像格式的压缩，包括 JPEG、PNG 和 GIF。对于 PNG 图像，它可以在保留透明度等关键特性的同时，有效地减小文件尺寸。对于 GIF 图像，也能在一定程度上优化文件大小，减少动画 GIF 的加载时间。 懒加载 WP Smush Pro 实现了图像懒加载功能。懒加载是一种延迟加载图像的技术，当用户滚动页面到包含图像的位置时，图像才会加载。这样可以避免一次性加载大量图像，尤其是在页面内容较多且包含许多图像的情况下。例如，在一个新闻网站的长文章页面，带有大量配图，懒加载可以让用户在浏览文章开头部分时，不需要等待所有图片加载，从而提高页面的初始加载速度，同时也能
Could not create share link. Missing file: C:\Users\xx\.conda\envs\omni\Lib\site-packages\gradio\frpc_windows_amd64_v0.3 1. Download this file: https://cdn-media.huggingface.co/frpc-gradio-0.3/frpc_windows_amd64.exe 2. Rename the downloaded file to: frpc_windows_amd64_v0.3 3. Move the file to this location: C:\Users\xx\.conda\envs\omni\Lib\site-packages\gradio