使用jQuery，CSS和HTML創建的嵌套菜單

Question

我想創建一個使用jQuery與多層嵌套的導航欄。

當我將鼠標懸停在主菜單上而不是顯示第一個列表時，所有嵌套列表都顯示出來，我找不到原因。

這裏是我的jQuery

(function($) { 

     // cache nav; 
      var nav = $("#topNav"); 

      //add indicators and hovers to submenu parents; 
      nav.find("li").each(function() { 
       if (this.find("ul").length > 0) { 


       // show subnav on hover 
        $(this).mouseenter(function() { 
         var ullist = $(this).find("ul"); 
         ullist.stop(true, true).slideDown(); 

         ullist.removeClass("sublinks"); 
        }); 

       // hide submenus on exit 
        $(this).mouseleave(function() { 
         var ullist = $(this).find("ul"); 
         ullist.stop(true, true).slideUp(); 
         ullist.addClass("sublinks"); 
        }); 
       } 
      }); 

     })(jQuery); 

和我的CSS：

nav > ul > li > a > img { 
width:60px; 
    height:60px; 
} 

nav ul ul ul 
{ 
left:100px; 
top:-1px; 
} 

.submenu{ 
display:none; 
} 

.sublinks li { 
display:none; 
} 


.social li > a > img{ 
    width:40px; 
height:40px; 
} 

Answer 1

嘗試。