如何使我的drop drop保持drop down？

Question

我目前正在工作的站点位于：http://counterbeing.com

我试图解决的问题是，当您将鼠标移动到“类别”按钮上时，子菜单项会弹出，但在您可以单击它们之前它们就消失了。

我尝试过各种各样的方法。首先，我试图将包含子菜单项的div定义为也会触发动画的东西，但这似乎不起作用……

下面是我用来获取这两个层的javascript文件。我把它分成两层，因为其中一层有点透明。

$(document).ready(function() {
($("div#CategoriesLink")||$("div#CategoryButtonHolder")).hover(function(){
    $("div#navdrop").animate({
        top: "0px"
    })
    $("div#CategoryButtonHolder").animate({
        top: "0px"
    })
}); 
$("div#CategoriesLink").mouseout(function(){        

    $("div#navdrop").animate({
        top: "-162px"
    })
    $("div#CategoryButtonHolder").animate({
        top: "-162px"
    })
});
});

Answer 1

因此，首先，如果您在CategoryButtonHolder上使用rgba背景，则不需要使用两个div。

接下来，您将使用mouseout事件处理程序为div备份设置动画。因此，每次鼠标离开按钮时，都会激活鼠标输出。尝试将鼠标输出处理程序移动到CategoryButtonHolder。

$("#CategoryButtonHolder").mouseout(function(){
   $(this).animate({
       top: '-'+$(this).outerHeight()
   });
)};

Answer 2

对于hover来说，一个很好的插件解决了这种问题：http://cherne.net/brian/resources/jquery.hoverIntent.html；你可以让它等待并保持X毫秒的时间，然后它就会变得非常流畅。

HTH。