当我将鼠标悬停在上面时，为什么我的下拉菜单不可见？

Question

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

My site with the error

Answer 1

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

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

如果您移除#crwrap（或使用z-index: -999将其移至后台），则可以正常使用。

Answer 2

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

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

我还建议你查看关于CSS hybrid menus的优秀alistapart.com文章。它有一些很有用的指针和技巧。