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条评论
点击登录参与评论