jQuery的下拉菜單錯誤

Question

我有一個下拉菜單，你可以在下面的例子中看到：

http://jsfiddle.net/WYMzX/1/

如果我做進入懸停子我從子出去後工作正常，但如果我將鼠標懸停在「Menú」按鈕上，並且在我離開或出去後，鼠標按下Menú按鈕，子菜單仍處於打開狀態！ :(而不是爲我工作的罰款

我想，如果我離開菜單或子菜單的sumenú被關閉。

謝謝！

Answer 1

你有一些問題存在

1 - 你需要爲頂級項目設置一個寬度 - 沒有寬度填充整個寬度 - 這就是爲什麼它不清除樣式。需要mouseleav e

3 - 跨度的使用並非真正必要，將您的類應用於您li和一個標籤，並且您很好。

這裏是工作小提琴。順便說一句，你可以用純CSS做所有這些，但是我已經編輯了你的例子，因爲我想你可能想添加過渡動畫或者其他東西。

http://jsfiddle.net/WYMzX/4/

---------------編輯--------------

這是一個使用純CSS版本對你來說，你需要做的就是添加

ul#topnav li:hover .submenu{ 
    display: block!important; 
    } 

http://jsfiddle.net/zandergrin/WYMzX/6/

Answer 2

試試這個，它工作正常

$(document).ready(function() { 

$("ul#topnav li a.dropdown").hover(function() { 
    $("ul#topnav li ul.submenu").show(0); 

}); 

$("ul#topnav li ul.submenu").hover(function() { 
    $("ul#topnav li a.dropdown").addClass('top_nav_li_a_hover'); 

}); 


$("ul#topnav li").mouseleave (function() { 


    $("ul#topnav li ul.submenu").hide(0);  
    $("ul#topnav li a.dropdown").removeClass('top_nav_li_a_hover'); 

}); 


    }); 

它是爲u已經用我剛剛更換$("ul#topnav li ul.submenu").mouseleave與$("ul#topnav li").mouseleave

試試這件JS Fiddle