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

Question

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

My site with the error

Answer 1

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

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

如果您删除#crwrap（或使用z-index: -999将其移动到背景），它对我来说工作正常。

Answer 2

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

我会推荐在主菜单项的容器中嵌套子菜单项。

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