水平下拉菜单MouseOver问题

Question

在网上搜索几个小时后，我决定编写自己的水平下拉菜单代码，该菜单允许下拉菜单中的html内容而不是每个人使用的标准“列表”项目。与我发现的大多数下拉菜单相比，我的代码非常少。我有两个让我疯狂的问题。

问题1： 当您将鼠标放在类别上时，'dropdown'div显示为应该显示，但是当您将鼠标悬停在'dropdown'div上时，它会消失。但是，如果你将鼠标悬停在另一个类别上，那么'dropdown'div会消失，并且新的一个会出现，因为它们都应该。我错过了什么？

问题2： 如果将光标停在类别的下划线链接出现的位置并将其留在那里，则“下拉”div会弹出两次以闪烁。无法弄清楚吗？

我已经发布我的代码在这里：http://jsfiddle.net/UXxL8/

非常感谢，我知道这可能是一些简单的我俯瞰。但是你知道在你盯着相同的代码太久之后它是怎么回事......

Answer 1

您还需要将mouseover/mouseout绑定到下拉列表。而下拉闪烁的原因是因为动画功能排队 - fadeIn在fadeOut完成后开始，因此在添加另一个动画之前需要添加stop。

Here's改进的代码。

Answer 2

现在你将你的行为直接附加到锚上。当您将鼠标放到新曝光的内容时，您已经超出了您的锚点区域并触发了鼠标悬停。如果您将锚点和下拉列表放在同一个容器中，然后将您的事件附加到该容器中，您将获得预期的行为。

我还建议使用mouseenter和mouseleave而不是mouseover和mouseout，因为您的菜单中会包含子元素。这question是一个很好的描述为什么这是明智的。

我设置了更新的小提琴here。类别3菜单项已更新。