为什么当我将鼠标悬停在下拉菜单上时它不可见？答案

【问题标题】：Why doesn't my drop-down menu stay visible when I hover over it?为什么当我将鼠标悬停在下拉菜单上时它不可见？
【发布时间】：2011-08-13 08:35:04
【问题描述】：

好的，我的页面上有两个下拉菜单，导航和链接。链接正常工作，但是当我尝试将鼠标悬停在它上面时，导航消失了。我不知道为什么，所以我问。为什么当我将鼠标悬停在导航菜单上时它会消失，我该如何解决？

【问题讨论】：

【解决方案1】：

您有一个名为#crwrap 的元素挂在左侧菜单上。因此，当您将鼠标移动到导航选项时，会触发 mouseout，因为您突然悬停在 #crwrap 元素而不是导航菜单上。它是不可见的，但如果您使用支持 DOM 搜索的调试工具，您会看到它覆盖了导航菜单选项的区域。

它没有覆盖链接菜单，因此没有任何问题。

如果您删除 #crwrap（或使用 z-index: -999 将其移至后台），它对我来说很好。

【讨论】：

【解决方案2】：

显示菜单的 JS 是通过鼠标悬停和鼠标移出菜单部分中的元素来切换的。子菜单不嵌套在这些元素中。因此，当您将鼠标向下移向子菜单时，您会触发主菜单项上的 mouseout，即隐藏子菜单。

我建议将子菜单项嵌套在主菜单项的容器中。

我还建议您查看关于 CSS hybrid menus 的优秀 alistapart.com 文章。它有一些您可能会发现有用的优秀指针和技术。

【讨论】：

那么为什么链接菜单有效而导航无效？它们的编码方式相同。
您正在使用切换，它在隐藏和显示之间切换。在第一个菜单上，您将获得奇数个悬停事件，第二个是偶数。 $("#linklink, #linksmenu, #navilink, #navimenu").hover(function() { console.log('hovering over ' + this.id); })
好的，我将它们复制并粘贴到主菜单中，看看它是否有效，但我仍然遇到同样的错误。你可以在我的网站上看到它，我上传了它。