二级菜单的显示和隐藏

先写出html表单（展示部分），大致思路div.m2-nav-ul-li-a

<div class="m2"> <nav> <ul> <li><a href="">首页</a></li> <li> <a href="">全网营销</a> <ul class="sub-menu"> <li><a href="">SEO</a></li> <li><a href="">SEM</a></li> <li><a href="">微博营销</a></li> <li><a href="">微信营销</a></li> <li><a href="">论坛营销</a></li> <li><a href="">博客营销</a></li> <li><a href="">空间营销</a></li> <li><a href="">空间营销</a></li> <li><a href="">软文推广</a></li> <li><a href="">事件策划</a></li> <li><a href="">口啤营销</a></li> </ul> </li> </ul> </nav> </div>

然后在js样式里写入

$(function(){ // 获取nav标签下ul里的li元素（<li><a href="">首页</a></li>是二级菜单的导向栏），并且输出查看是否正确 $(".nav ul li").hover(function(){ console.log($(this).index()); }); })

控制台查看结果：

    然后实现二级菜单下拉功能

$(function(){ // .hover(划入,划出) $(".nav ul li").hover(function(){ // 寻找ul.sub-menu，样式为鼠标划入展开，划出隐藏 $(this).find('.sub-menu').css('display','block'); },function(){ $(this).find('.sub-menu').css('display','none'); }); })

代码演示：