我在使用响应式下拉导航列表时遇到问题,如果您将鼠标缓慢移离父链接,则会显示最后一个父项的子菜单。
我上传了一个示例:http://webe.emv3.com/aps/twelve/primary.html
如果您将鼠标悬停在“充值卡”上,然后将鼠标缓慢向下移至子菜单,则会激活帮助。
您知道为什么会发生这种情况吗?
最佳答案
这是因为 .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%;
}
关于html - CSS 菜单下拉悬停问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18021368/