双层下拉菜单上悬停无法正常工作

Question

Here is my fiddle link其中有代码...我的问题是，在一级的下拉菜单工作，但第二级下拉菜单doesnot ...它不会消失，当我采取光标从单元分离，并采取在菜单的第二项..

有什么不对？我的HTML如下

<div id="menu"> 
    <ul class="topnav"> 
     <li><a href="#">Live-Radio</a></li> 
     <li><a href="#">Blog</a></li> 
     <li><a href="#">Profile</a></li> 
     <li><a href="#">Home</a></li> 
     <li> 
      <a href="#">Songs</a> 
      <ul class="subnav"> 
       <li> 
        <a href="#">Sub Nav Link</a> 
        <ul class="subnav2"> 
         <li><a href="#">Sub21a</a></li> 
         <li><a href="#">Sub22a</a></li> 
        </ul>     
       </li> 
       <li><a href="#">Sub Nav Link</a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

我想这种HTML标记的下拉。您可以检出的详细代码中的链接.....这里是一些jQuery的，我认为有问题（但DONO它是什么）从代码取...

JS：

//for my second subnav menu 

$(this).parent().find("ul.subnav").hover(function() { 
    $(this).find("li ul.subnav2").slideDown('fast').show(); //Drop down the subnav2 on hover 
} , function() { 
    $(this).find("li ul.subnav2").slideUp('fast'); //Drop down the subnav2 on hover 
}); 

Answer 1

你需要的目标只有li S作一个.subnav2元素作为孩子：

$(this).parent().find("ul.subnav").find('li ul.subnav2').parent().hover(function() { 
     $(this).children("ul.subnav2").slideDown('fast').show(); //Drop down the subnav2 on hover 
    } , function() { 
     $(this).children("ul.subnav2").slideUp('fast'); //Drop down the subnav2 on hover 
    }); 

演示：http://jsfiddle.net/ehNrE/14/

在一个侧面，不e，.parent().find(...)与.siblings(...)相同。如果您删除标签名称（如果因为多个标签类型具有相同的类别或您需要支持Internet Explorer 5.5而只需要选择某种标签类型，则保留标签名称的唯一原因是选择器的性能会更快）。

ul.subnav将改为.subnav。