jQuery CSS下拉菜单

我再次发布这个问题（希望这是正确的做法）。自从我最初发布这个问题以来，我已经能够更明确地认识到问题的起因（尽管我自己仍然不知道如何解决它…仍然是这方面的新手）

我用标准的HTML和CSS设置了一个水平下拉菜单：

HTML:

JQUERY：

$('#menu>li').hover(function(){
   $(this).closest('li').find('>ul').css({'opacity':0,'margin-       top':20}).show().animate({'margin-top':1,'opacity':1},300);
   },function(){
   $(this).find('>ul').fadeOut("slow");

});

子菜单（嵌套标记）在OK中设置动画，但不会按预期淡出。当鼠标离开菜单时，子菜单不会像我所希望的那样淡出，它会立即消失

我认为正在发生的是，当鼠标从菜单中移开时，CSS（参见上面的代码片段）会启动，覆盖jQuery，嵌套的标记会立即重置为显示：none。淡出（“慢”）功能没有机会发生

有谁能告诉我如何在页面加载时将子菜单设置为不可见，但当用户将鼠标悬停在菜单上/将鼠标悬停在菜单上时，如何将子菜单完全响应jQuery，从而使子菜单进入动画并淡出

---

谢谢。

您正在将内部ul的

top

规则设置为100%，因此基本上当它在当前呈现页面下方显示时，您将无法看到它。要修复它，必须首先将包含它的

li

设置为

display

属性为

relative

。这样，您的ul将相对于该li进行绝对定位，并在顶部位置添加一个较小的偏移以正确放置，如下所示

#menu li ul {
   display: none;
   position: absolute;
   left: 0;
   top: 20px;
   padding: 0; 
   margin: 0;
}
#menu li{
    position:relative;
}

您的jq可以保持原样，但我已经格式化并在淡入/淡出之前添加了stop（）方法

$('#menu>li').hover(function(){
       $(this).closest('li').
       find('>ul').
       css({'opacity': 0,'margin-top': 20}).
       show().
       stop().
       animate({'margin-top': 1,'opacity': 1}, 300);
   },function(){
       $(this).find('>ul').stop().fadeOut("slow");
   });

---

你说相当标准。虽然您可能是对的，但当我们没有“工作”示例时，很难重现准确的错误。我建议你创作小提琴，然后我们可以看看。此外，静态css不会覆盖jQuery css.com。请创建一个小提琴在。我已经调整了你的HTML，jQuery和CSS。我没有使用

.hide

a.k.a

display:none

，因为这会让屏幕阅读器上的用户可以访问您的导航。嗨，扎里奇，很抱歉耽误了你的回复。这正是我想要的。我的下拉菜单与您的jQuery一起工作，但是，注意到一个新问题。。。当子菜单出现在“悬停”上，并向上设置动画时，我无法让它停在“包含”下。相反，当前，它移动到与包含内容重叠的位置，在链接文本（类别）下立即停止。如果将其设置为“动画设置到较低的点”，则当鼠标在子菜单上向下移动时会出现问题（例如，子菜单会消失片刻）。有什么建议吗？当然没问题，在这种情况下，您使用的是子菜单中的一个子菜单，因此它类似于三级菜单，在jquery中，您可以看到直接子选择器“#menu>li”，它只与第一级中的一个子菜单匹配，因此我们必须将其更改为“#menu li”，以便它可以在树中随意移动。接下来，您要为该子级创建一个类，并将其移到一边，这样它就不会位于第一个子菜单的顶部。这是演示版好运=）扎里奇，很抱歉耽误了你的回复。谢谢你的解决方案。现在都在工作。非常感谢！

#menu li ul {
   display: none;
   position: absolute;
   left: 0;
   top: 20px;
   padding: 0; 
   margin: 0;
}
#menu li{
    position:relative;
}

$('#menu>li').hover(function(){
       $(this).closest('li').
       find('>ul').
       css({'opacity': 0,'margin-top': 20}).
       show().
       stop().
       animate({'margin-top': 1,'opacity': 1}, 300);
   },function(){
       $(this).find('>ul').stop().fadeOut("slow");
   });