分享我的jquery实现下拉菜单心的

</li>
<li><a href="#">Ch3</a>
<ul class="submenu11">
<li><a href="#">Ch31</a></li>
<li><a href="#">Ch32</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Resources</a>
<ul class="submenu1">
<li><a href="#">Sub Nav Link</a></li>
<li><a href="#">Sub Nav Link</a></li>
</ul>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Advertise</a></li>
<li><a href="#">Submit</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

　　其中为六层深度的菜单结构，如下图

　　二、js部分（css就不贴出来了）

$(document).ready(function() {
  //第一部分
  // Top Menu
  //Only shows drop down trigger when js is enabled (Adds empty span tag after ul.submenu1*)
  $("ul.submenu1").parent().append("<span></span>");
  //第二部分
  $("ul.topmenu li span").click(function() { //When trigger is clicked...
    //Following events are applied to the submenu1 itself (moving submenu1 up and down)
    //Drop down the submenu1 on click
    $(this).parent().find("ul.submenu1").slideDown('fast').show();
    //在click后给绑定hover处理函数，感觉是比较巧妙的地方
    $(this).parent().hover(function() {
    }, function() {
      //When the mouse hovers out of the submenu1, move it back up
      $(this).parent().find("ul.submenu1").slideUp('slow');
    });
    //Following events are applied to the trigger (Hover events for the trigger)
  }).hover(function() {
    //On hover over, add class "hover"
    $(this).addClass("hover");
  }, function() {  //On Hover Out
    //On hover out, remove class "hover"
    $(this).removeClass("hover");
  });
  //第三部分
  $("ul.topmenu li ul.submenu1 li").hover(function() {
    $(this).find("ul.submenu11:first").show("slow");
  }, function() {
    $(this).find("ul.submenu11:first").hide("fast");
  });
})；

　　第一部分：

　　添加了下了菜单的一个触发按钮

　　第二部分：

　　绑定了一个click事件的处理函数

　　触发按钮被click后给下拉菜单最外层的li绑定hover处理函数，感觉是比较巧妙的地方。

　　给最外层的li绑定hover函数，这里处理函数写的是当鼠标悬停在li上时不做任何处理（第一函数为空），当鼠标离开时li收起。