昨天有一个同事，叫我帮忙，说他需要一个下拉菜单，叫我帮他整个出来。我说没问题啊，中午花了点时间，然后就给它弄了一个CSS样式的（这个这个是我 以前弄好的，一直收藏着，就拿出来改了改 给他了）。
可是，昨天下班的时候，他说他还想看一看jquery实现的下拉菜单，呵呵，我说你老兄可真够贪心的，不过 既然人家都说了，我昨天晚上就整了一个jquery的下拉菜单。其实，2个版本都很简单。
希望对各位看官有帮助。
HTML coed：
2个都运用下面的这个HTML代码作为演示实例：
<div id="div" class="menu">
<ul>
<li><a class="aa" href="">首页</a>
<ul>
<li><a href="#" title="">注册</a></li>
<li><a href="" title="">登录</a></li>
<li><a href="" title="">注销</a></li>
<li><a href="" title="">行业新闻</a></li>
</ul>
</li>
<li><a class="aa" href="">商务中心</a>
<ul>
<li><a href="" title="">客户首单</a></li>
<li><a href="" title="">新建任务单</a></li>
<li><a href="" title="">客户单跟踪</a></li>
<li><a href="" title="">历史往来记录</a></li>
<li><a href="" title="">业务签收</a></li>
</ul>
</li>
<li><a class="aa" href="">配送中心</a>
<ul>
<li><a href="" title="">新建配送单</a></li>
<li><a href="" title="">车辆检查</a></li>
<li><a href="" title="">业务跟踪</a></li>
</ul>
</li>
<li><a class="aa" href="">运输中心</a>
<ul>
<li><a href="" title="">新建派车单</a></li>
<li><a href="" title="">车辆跟踪</a></li>
</ul>
</li>
<li><a class="aa" href="">系统维护</a>
<ul>
<li><a href="" title="">城市数据</a></li>
<li><a href="" title="">集团公司信息</a></li>
<li><a href="" title="">部门信息</a></li>
<li><a href="" title="">员工信息</a></li>
<li><a href="" title="">仓库数据</a></li>
</ul>
</li>
<li><a class="aa" href="">我的任务</a>
<ul>
<li><a href="" title="Example one">我提交的任务</a></li>
<li><a href="" title="">我收到的任务</a></li>
<li><a href="" title="">被退回的任务</a></li>
</ul>
</li>
<li><a class="aa" href="">技术支持</a>
<ul>
<li><a href="" title="">技术架构</a></li>
<li><a href="" title="">应用说明</a></li>
<li><a href="" title="">关于我们</a></li>
</ul>
</li>
</ul>
<div class="clear">
</div>
</div>
1.JQuery版本的下来菜单
<style type="text/css">
*{ font-size:12px;}
a{ color:White; text-decoration:none;}
ul{margin:0;padding:0;}
ul li{list-style:none;}
#div{960px;height:28px;}
#div ul li{float:left;height:28px;display:inline;line-height:28px;position:relative; margin-left:10px; left:-10px; cursor:pointer;}
#div ul li ul{position:absolute;z-index:99;display:none;top:30px;90px;}
#div ul li ul li{display:block;68px;height:26px;background-color:red;}
#div ul li a.aa{color:red;text-decoration:none; border:1px solid balck;120px; padding:10px; background-color:#b3ab79;}
</style>
上面的对一些的基本的CSS一些修饰，一看就懂。其实，上面我觉得最重要的是 #div ul li这里的是需要设置position为相对位置或者是绝对定位，比如我这里用的是：position:relative。
可能有些人有郁闷为什么需要这个呢？其实，这个主要是为了让第二个ul里面的子菜单能定位到它所需要的位置。就像上面的实例里用top和left来进行位置的定位。
我在园子里的一篇文章，如果不懂的可以看看：position知识
$(function () {
$("#div ul li").hover(function () {
$(this).css("background", "#dfc184").children("ul").slideDown();
}, function () {
$(this).css("background", "#fff").children("ul").slideUp();
})
$("#div ul li ul li").hover(function () {
$(this).css("backgroundColor", "#b3ab79");
}, function () {
$(this).css("backgroundColor", "red");
})
})
上面的是核心的jquery代码，其实很好理解，需要理解的也就是 hover这个事件。如果需要进一步了解jquery事件的，可以看我的另一片文章：《JQuery 动画效果集锦》。
hover事件 说到底，就是在2个事件进行来回的切换。就OK了，这样就实现了，但把鼠标移动到子菜单的时候，变底色的效果了。
很简单吧。
2.CSS 下拉子菜单
这个，好像我发表过了，不管了，我就在发一次了，把代码贴上，如果有不懂的看管，可以给我留言，我们在讨论。
<style type="text/css">
.menu{font-family: 宋体, Arial, Helvetica, sans-serif; 750px; margin: 0; margin: 5px 0 50px 0;}
.menu ul{padding: 0; margin: 0; list-style-type: none;}
.menu ul li{float: left; position: relative;}
.menu ul li a, .menu ul li a:visited{display: block; text-align: center; text-decoration: none; 104px; height: 30px; color: #000; border: 1px solid #fff; border- 1px 1px 0 0; background: #c9c9a7; line-height: 30px; font-size: 11px;}
.menu ul li ul{display: none;}
.menu ul li:hover a{color: #fff; background: #b3ab79;}
.menu ul li:hover ul{display: block; position: absolute; top: 31px; left: 0; 105px;}
.menu ul li:hover ul li a{display: block; background: #faeec7; color: #000;}
.menu ul li:hover ul li a:hover{background: #dfc184; color: #000;}
</style>
上面需要理解的是 CSS中的伪类，如果不懂伪类的 可以看看我给你们找的资料，很好理解。
伪类参考资料：
1.CSS 伪类
我不怎么知道发布发布 我的压缩文件。。。知道的望说一句。