Javascript 水平下拉菜单鼠标悬停问题

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

问题1： 当您将鼠标悬停在类别上时，“dropdown”div将按其应有的方式显示，但当您将鼠标悬停在“dropdown”div上时，它将消失。但是，如果你将鼠标移到另一个类别上，“下拉”div将消失，新类别将按它们应有的方式显示。我错过了什么

问题2： 如果您将光标停在类别的下划线链接上，并将其保留在该位置，“dropdown”div会闪烁两次。你也不明白吗

我已在此处发布了我的代码：

---

非常感谢，我知道我可能忽略了一些简单的事情。但是，当你盯着同一个代码看太久之后，你就知道它是什么样子了。

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

我还建议使用mouseenter和mouseleave，而不是mouseover和mouseout，因为菜单中将包含子元素。这很好地说明了为什么这样做是明智的

---

我摆好了一把最新的小提琴。类别3菜单项已更新

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

我还建议使用mouseenter和mouseleave，而不是mouseover和mouseout，因为菜单中将包含子元素。这很好地说明了为什么这样做是明智的

---

我摆好了一把最新的小提琴。类别3菜单项已更新

您还需要将

mouseover/mouseout

绑定到下拉列表。下拉菜单闪烁的原因是动画函数排队-

fadeIn

在

fadeOut

完成后开始，因此在添加另一个动画之前需要先查看当前动画

---

改进的代码。

您还需要将

mouseover/mouseout

绑定到下拉列表。下拉菜单闪烁的原因是动画函数排队-

fadeIn

在

fadeOut

完成后开始，因此在添加另一个动画之前需要先查看当前动画

改进后的代码