html - CSS 菜单下拉悬停问题

Question

我在使用响应式下拉导航列表时遇到问题，如果您将鼠标缓慢移离父链接，则会显示最后一个父项的子菜单。

我上传了一个示例:http://webe.emv3.com/aps/twelve/primary.html

如果您将鼠标悬停在“充值卡”上，然后将鼠标缓慢向下移至子菜单，则会激活帮助。

您知道为什么会发生这种情况吗？

Answer 1

这是因为 .rdd-menu .submenu-panel 没有隐藏和/或放置在不碍事的地方。因此，当您将鼠标悬停在父级上时，所有 .submenu-panel 仍然可见。 height:0 不会隐藏元素。

一个简单的:

.rdd-menu .submenu-panel {
   display: none;
}    

.rdd-menu li:hover > .submenu-panel {
   display: block;
}

会修复它。您也可以忽略您的高度声明。

编辑:我刚刚注意到您对它们进行了转换。您可以将子菜单放置在屏幕外以保持过渡完整:

.rdd-menu .submenu-panel {
   top: -10%;
}    

.rdd-menu li:hover > .submenu-panel {
   top: 100%;
}