Html:
<ul class="nav"> <li>一级菜单 <ul class="secondNav"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单 <ul class="secondNav"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单 <ul class="secondNav"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单 <ul class="secondNav"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单 <ul class="secondNav"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> <li>一级菜单 <ul class="secondNav"> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> <li>二级菜单</li> </ul> </li> </ul>
CSS:
<style type="text/css">
ul {
margin: 0;
padding: 0;
list-style: none;
}
.nav>li{
float: left;
padding: 10px 20px;
background-color: #C00;
color: #FFF;
}
.secondNav{
display: none;
}
.secondNav li{
padding-top: 10px;
}
</style>JS:
<script type="text/javascript">
$(function(){
//给一级菜单li绑定鼠标经过事件
$(".nav li").mouseover(function(){
//显示当前li下面的子菜单
$(this).children().show();
});
//给一级菜单li绑定鼠标离开事件
$(".nav li").mouseout(function(){
//隐藏当前li下面的子菜单
$(this).children().hide();
});
});
</script>实现效果:


0条评论
点击登录参与评论