html - CSS菜单下拉悬停问题

Question

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

我在以下位置上传了一个示例：http ://webe.emv3.com/aps/twelve/primary.html

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

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

Answer 1

这是因为.rdd-menu .submenu-panel没有隐藏和/或放置在不碍事的地方。因此，当您 :hover 在父级上时，所有.submenu-panel' 仍然可见。拥有 aheight: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%;
}

Answer 2

我已经找到原因了。第 153-156 行的边界存在问题：

.rdd-menu .submenu-panel    {
    border-radius:0 0 10px 10px;
    border:1px solid #ccc;
    border-top:0;

即使顶部边框已被移除，但具有左、右和底部边框也会导致问题。删除它们已经解决了它。

感谢您对此的帮助。谢谢你。