有没有更好的方法做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。