下拉菜单在我开发中经常遇到，但是没个项目都需要从新编写，改起来虽然简单但是很麻烦，我这个人还是比较懒的，今天有时间把我以前的项目开发中的菜单整理一遍，编写一个通用版本，以后就不需要那么麻烦了。
特点
今天整理的菜单是由jquery+css开发有如下特点：
一、通用性强
以前在用的一个下拉菜单有个问题，需要对主导航和子菜单进行单独的设置，比如，二级菜单是class="first_menu",三级菜单是class="second_menu"....依次类推，这样的写法有个问题就是不利于程序员执行循环输出，而本菜单只需引入一个CSS样式即可，无需对多级菜单定义。
二、美观自动调用下拉指示
以前我们手工会对下拉菜单添加一个下拉展示的class，而现在，只需要在css中定义好下拉效果的样式，代码会自动寻找下拉菜单并且添加指示箭头；
三、调用简单
程序员输出列表简单不需要很多的判断，只要递归调用菜单数据即可。
实现
一、HTML代码
首先我们在页面输出菜单数据，这些数据用ul和li组成构成菜单列表。具体结构代码如下所示：
<ul> <li><a href="#">首页</a></li> <li><a href="#">菜单一</a> <ul> <li><a href="#">过山车</a></li> <li><a href="#">火山爆发</a></li> <li><a href="#">小小鸟</a></li> </ul> </li> <li><a href="#">菜单二</a> <ul> <li><a href="#">关于我们</a> <ul> <li><a href="#">山高地缘</a> <ul> <li><a href="#">飞鸽传书</a></li> <li><a href="#">生生世世</a></li> <li><a href="#">飞黄腾达</a></li> </ul> </li> <li><a href="#">数据库</a> <ul> <li><a href="#">数据库表</a></li> <li><a href="#">数据加密</a></li> <li><a href="#">数据建模</a></li> </ul> </li> <li><a href="#">C摄像头</a></li> </ul> </li> <li><a href="#">测试产品</a></li> </ul> </li> </ul>
一些基本的html代码，很简单无需解释代码含义，强调一下代码结构：无论是二级、三级还是几级菜单主要是嵌套ul即可；样式表名称也非常单一，子菜单就是“sub_menu”样式，这样非常有利于程序代码循环调用。
二、CSS样式
Css样式代码也非常简单，具体代码如下：
a { text-decoration:none; } ul, li { list-style:none; margin:0; padding:0; } /*定义菜单*/ .Menue li { background:#111; color:#fff; height:30px; line-height:30px; position:relative; float:left; margin-right:5px; width:100px; text-align:center; font-family:Arial, Helvetica, sans-serif; } .Menue li a { color:#fff; font-size:14px; display:block; } /*下拉菜单样式*/ ul.sub_menu { position:absolute;width:100px; display:none; z-index:999; } .Menue li ul.sub_menu li { background:none; color:#555; font-size:12px; border-bottom:1px #333 solid; position:relative; width:100px; height:30px; } .Menue li ul.sub_menu li.last { border-bottom:none; } /*js会对最后一个li添加该class，去掉border-bottom效果*/ .Menue li ul.sub_menu li a { background:#222; color:#888; display:block;height:30px; } .Menue li ul.sub_menu li a:hover, .Menue li ul.sub_menu li a.now { background:#f90;color:#fff;} .Menue li.now,.Menue li.current { background:#f60;color:#fff;} /*如果有下拉菜单添加的class*/ .hasmenu { background:url(arrow.png) no-repeat right; padding-right:15px;}/*主导航箭头向下*/ .Menue li a.hasmenu { background:url(arrow.png) no-repeat right; padding-right:15px;background-position:right -30px;}/*下拉菜单箭头向右*/ .Menue li ul.sub_menu li a.hasmenu { background:#222 url(arrow.png) no-repeat right top;} .Menue li ul.sub_menu li a.hasmenu:hover { background:#f90 url(arrow.png) no-repeat right top; color:#fff;}
这里我只强调两点注意事项：
1、position中absolute 与 relative区别
absolute：绝对定位，CSS 写法“ position: absolute; ”，它的定位分两种情况，如下：
A、没有设定 Top、Right、Bottom、Left 的情况，默认依据父级的“内容区域原始点”为原始点。
B. 有设定 Top、Right、Bottom、Left 的情况，这里又分了两种情况如下：
(1). 父级没 position 属性，浏览器左上角(即 Body)为“坐标原始点”进行定位，位置由 Top、Right、Bottom、Left 属性决定。
(2). 父级有 position 属性，父级的“坐标原始点”为原始点。