jQuery下拉菜单
下拉菜单：需要注意的一点，在下拉过程中有动画队列，非常影响体验，需要在实现下拉菜单过程中去除掉
代码如下
<html>
<head>
<title></title>
</head>
<style>
*{
margin:0;
padding:0;
}
.nav{
width:300px;
height:40px;
background:red;
margin:100px auto;
}
.nav>li{
list-style:none;
float:left;
width:100px;
text-align:center;
line-height:40px;
}
.sub{
background:blue;
display:none;
}
.sub>li{
list-style:none;
width:100px;
text-align:center;
line-height:40px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
$('.nav>li').mouseenter(function(){ //获取到所有的nav下li的进入事件
var $sub=$(this).siblings().children('.sub') //$(this).siblings(),表示不是鼠标所选到的其他li,.children('.sub'),表示不是鼠标选到li下的类为sub
$(this).children('.sub').stop().slideDown(1000) //$(this)表示鼠标所选到的li，.children('.sub'),选到li下的sub这个类，.stop(),停止之前所有的动画（如果不停止，当你鼠标快速切换，会发现动画在一直重复执行，影响体验），执行后面的下滑事件
$sub.stop().slideUp(1000) //.stop(),同上，
})
$('.nav').mouseleave(function(){ //当离开nav时触发
$('.nav>li').children('.sub').stop().slideUp(1000) //找到，nav>li下的sub，先停止动画队列，让它们上滑隐藏起来
})
})
</script>
<body>
<ul class="nav">
<li>tab1
<ul class="sub">
<li>tab1二级菜单</li>
<li>tab1二级菜单</li>
<li>tab1二级菜单</li>
<li>tab1二级菜单</li>
<li>tab1二级菜单</li>
<li>tab1二级菜单</li>
</ul>
</li>
<li>tab2
<ul class="sub">
<li>tab2二级菜单</li>
<li>tab2二级菜单</li>
<li>tab2二级菜单</li>
<li>tab2二级菜单</li>
<li>tab2二级菜单</li>
<li>tab2二级菜单</li>
</ul>
</li>
<li>tab3
<ul class="sub">
<li>tab3二级菜单</li>
<li>tab3二级菜单</li>
<li>tab3二级菜单</li>
<li>tab3二级菜单</li>
<li>tab3二级菜单</li>
<li>tab3二级菜单</li>
</ul>
</li>
</ul>
</body>
</html>
效果如下
