有沒有更好的方法做jQuery下拉菜單？

Question

我想用jQuery的hover做下拉菜單。所以我嘗試的第一件事是：

<ul id="menu"> 
    <li> 
    <ul> 
     ... 
    </ul> 
    </li> 
    ... 
</ul> 

$(" #menu ul ").css({display: "none", visibility: "hidden"}); 
$(" #menu li ").hover(function() { 
    $(this).find('ul:first:hidden').css(visibility:"visible", display:"block"}).show('fast'); 
    }, 
    function() { 
    $(this).find('ul:first').css({visibility:"hidden", display:"none"}); 
    }); 

和這個工程很棒...在Firefox中。不幸的是，在我正在運行的Chrome版本（9.0.597.94）中，如果將鼠標懸停在該下拉菜單上，則會在$（「＃menu li＃）上觸發鼠標。」

好吧，我們有一個競爭條件，我需要做的就是添加一些定時器...

(function(){ 
var timer; 
$(" #menu li ").hover(function() { 
    $(this).find('ul:first:hidden').css(visibility:"visible", display:"block"}).show('fast'); 
    }, 
    function() { 
    var header = $(this); 
    timer = setTimeout(function() { 
     header.find('ul:first').css({visibility:"hidden", display:"none"}); 
     }, 100); 
    }); 
$(" #menu li > ul ").hover(function() { 
    clearTimeout(timer); 
    }, 
    function() { 
    $(this).css({visibility:"hidden", display:"none"}); 
    }); 
}(); 

，直到有人說：we need to put a textbox in that dropdown menu其中一期工程真正偉大的;當然還有一個文本框使鼠標移出火上$（」 #menu LI> ul「），所以現在我必須把另一個嵌套的定時器層，我在想：必須有更好的方法來做到這一點！

所以我希望有人可以線索我在...

Answer 1

是否有原因，您不能使用Suckerfish（或要成熟Superfish）？看起來這是一個不需要重新創建的輪子...

Answer 2

無論如何...我想你可以看看這裏：38 jQuery and CSS Drop Down Multi Level Menu Solutions。