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

Question

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

Answer 1

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

这是一张图片，用于解释 .navbar .dropdown ul 上的那些 padding: 10px 0 以及菜单消失的原因：

当您将鼠标悬停在绿色区域（ul 顶部 10px 和底部 10px）上时，这意味着您没有将鼠标悬停在 link。

你把padding删掉，就不会再闪烁了

Answer 2

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

在您的示例中，请注意只有当菜单在动画期间与光标交互时才会出现闪烁。

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

从以下选择器 .navbar .dropdown:hover > ul 和 .navbar .dropdown ul.

中删除两个 top 属性

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

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

Bootstrap Navbar dropdown flickering / not working

html

javascript

css

jquery

bootstrap-5