雙層下拉菜單上懸停無法正常工作

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。