Bootstrap 导航栏下拉菜单闪烁/不工作

Question

我在一个项目中使用了这个 FlexStart Boostrap Template，但我注意到导航栏下拉菜单中的一个问题。当我将鼠标悬停在菜单和子菜单上时，它会闪烁。花了很多时间却无法解决。你能注意到为什么这不起作用吗？

Answer 1

简单地说，因为您不再将鼠标悬停在菜单链接本身上，您将离开链接并将鼠标悬停在 .navbar .dropdown ul 的 10 像素底部填充上。

以下图片解释了 padding: 10px 0 上的那些 .navbar .dropdown ul 以及菜单消失的原因：

当您将鼠标悬停在绿色区域（UL 顶部 10 像素和底部 10 像素）上时，表示您并未将鼠标悬停在链接上。

您可以简单地删除该填充，它就不会再闪烁了。

Answer 2

原因是退出导航菜单时播放的动画。菜单向下移动并淡出。但是，由于您的鼠标挡住了，它会触发淡入和上移动画。

在您的示例中，请注意仅在动画期间菜单与光标交互时才会发生闪烁。

假设您的代码完全相同，动画由 :hover 类的 .navbar .dropdown ul 伪选择器触发。

从以下选择器 top 和 .navbar .dropdown:hover > ul 中删除 .navbar .dropdown ul 属性。

.navbar .dropdown:hover > ul {
    opacity: 1;
    top: 100%; /* Delete This */
    visibility: visible;
}

.navbar .dropdown ul {
    display: block;
    position: absolute;
    left: 14px;
    top: 100%; /* Delete This */
    margin: 0;
    padding: 10px 0;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    background: #fff;
    box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
    transition: 0.3s;
    border-radius: 4px;
}