实现：
首先上他的代码（把全部的代码贴上来太长了，就捡部分吧），
一、html中ul列表
<ul class="topmenu"> <li><a href="#">home</a></li> <li><a href="#">tutorials</a> <ul class="submenu1"> <li><a href="#">ch1</a></li> <li><a href="#">ch2</a> <ul class="submenu11"> <li><a href="#">ch21</a> <ul class="submenu11"> <li><a href="#">ch211</a> <ul class="submenu11"> <li><a href="#">ch2111</a> <ul class="submenu11"> <li><a href="#">ch21111</a></li> <li><a href="#">ch21112</a></li> <li><a href="#">ch21113</a></li> <li><a href="#">ch21114</a></li> <li><a href="#">ch21115</a></li> <li><a href="#">ch21116</a></li> </ul> </li> <li><a href="#">ch2112</a></li> <li><a href="#">ch2113</a></li> <li><a href="#">ch2114</a></li> <li><a href="#">ch2115</a></li> </ul> </li> <li><a href="#">ch212</a></li> <li><a href="#">ch213</a></li> <li><a href="#">ch214</a></li> </ul> </li> <li><a href="#">ch22</a> <ul class="submenu11"> <li><a href="#">ch221</a></li> <li><a href="#">ch222</a></li> <li><a href="#">ch223</a></li> </ul> </li> <li><a href="#">ch23</a></li> </ul> </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收起。
这样一来，后面展开ul的菜单都是最外层的li里面，这样菜单就不会自动收起了，也就是等于是鼠标离开了整个菜单，li会自动收起。
第三部分：
给菜单下中嵌套的ul的hover事件绑定函数，用于展开和收起下一级菜单
$(this).find(ul.submenu11:first)也是比较巧妙的通过find获得当前匹配元素集合中每个元素的后代，并通过“ul.submenu11:first”筛选活动下一代元素给以展开。
同时也给下一级菜单绑定了收起的处理函数，与触发菜单中click给最外层li绑定的收起函数一同作用，是想菜单的自动收起功能。
总结：
其中展现了jquery筛选器的强大和灵活，也体现jquery优美的链式语法。
更多jquery下拉菜单的实现心得。