Jquery悬停动画问题

我正在使用jquery在导航菜单上创建悬停效果。我的jquery如下所示：

$(".hoverMenu").css({"opacity":"0"});

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

当您将鼠标悬停在第二个菜单项上时，带有hoverMenu类的div将向下设置动画，并增加其不透明度，直到完全可见为止。我遇到的问题是，在鼠标悬停菜单设置动画后，我希望能够将鼠标悬停在鼠标悬停菜单中的各个链接上。因为我将鼠标悬停在菜单外（鼠标悬停菜单很大，有一系列列表项和锚点），所以鼠标悬停菜单会进行动画备份。我想修改我的jquery，这样当您将鼠标悬停在.hovermenu上时，它就不会返回动画

---

如果这没有意义，我将抛出一个JSFIDLE，但我觉得这是一个相当常见的问题。总而言之，因为我将鼠标悬停在#菜单导航之外，所以鼠标悬停菜单会向上设置动画；但是，我希望悬停菜单保持不变，直到我将鼠标悬停在关闭悬停菜单和#菜单导航

时，使悬停菜单成为#菜单导航的子菜单，当您将鼠标悬停在它上时，因为它是子菜单，所以它仍然被视为悬停在#menu dav上。

这是一个相当常见的问题，我更喜欢的方法是简单地将子菜单添加为主项的子菜单。这样，子菜单是项目的一部分，上面有

悬停

，因此进入子菜单的鼠标不会触发离开事件。这通常是有效的，因为子菜单通常是绝对定位的，所以将其作为另一项的子菜单添加并不重要。

有一个与此非常类似的问题，我相信我已经发布了答案，但现在似乎找不到了。我相信你需要做的要点是当你把鼠标悬停在主

li

上时解除绑定，这样你就可以在下拉列表中自由移动。你的问题似乎与此类似：因为他们的菜单显示出来了，但点击后就消失了。菜单导航是由wordpress动态生成的，所以我不能作为一个孩子添加它，我能吗？@JCASE11为什么你不能？只需在HTML的正确位置生成它。如果没有其他东西，您可以使用jQuery来移动它。