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%;
}

Answer 2

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

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

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

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