jquery悬停效果，子菜单消失

Question

我使用 wordpress 动态创建导航栏，并使用 jquery 将子菜单附加到导航栏。使用 jquery，当您将鼠标悬停在第二个菜单项上时，子菜单会向下动画并淡入。我在这里创建了一个 jsfiddle： http ://jsfiddle.net/NWpBB/

它可以工作，但效果不佳。如果将鼠标悬停在子菜单中右上角的列表项上，它就会消失。看起来也有点毛病。考虑到上述 js 小提琴链接上的 jquery，我知道如何改进此悬停效果的功能吗？

这是jquery：

$("#menu-nav li:nth-child(2) a").append('<span id="dropdown"></span');

$(".hoverMenu").css({"opacity":"0"});
        $(".hoverMenu").appendTo("#menu-nav li:nth-child(2)");

        $("#menu-nav li:nth-child(2)").hover(function(){
            $(".hoverMenu").stop().animate({
                top: '38',
                opacity: '1'
            }, 500);
        }, function(){
            $(".hoverMenu").stop().animate({
                top: '-290',
                opacity: '0'
            }, 500);
        });

Answer 1

问题已解决： http://jsfiddle.net/NWpBB/1/

您只想访问直接#menu-nav 的“li”子级因此添加了“>”之间。

您还有另一个问题：当您将鼠标悬停在 0 不透明度的子菜单上时，它开始出现，因为 jQuery 告诉它。你应该让它显示：无，而不仅仅是隐藏。

编辑：最后一个解决了http://jsfiddle.net/NWpBB/4/