bootstrap 5 默认禁用:hover触发多级下拉菜单，因其依赖js控制显隐且子菜单默认display: none，纯css无法穿透不可见元素；须改用visibility/opacity控制、确保dom始终存在、精确定位并消除悬停断连。
为什么直接用 :hover 在多级菜单上会失效？
因为 Bootstrap 默认的下拉菜单（.dropdown-menu）是通过 JavaScript 控制显隐的，DOM 结构里子菜单（二级及以上）默认不在 DOM 流中（display: none），纯 CSS 的 :hover 无法穿透到不可见元素上触发展开。你 hover 一级菜单时，二级菜单还没渲染出来，自然没法继续 hover 到三级。
解决思路不是“覆盖 JS”，而是让子菜单始终在 DOM 中、仅靠 visibility 或 opacity 控制显隐，并配合层级和定位保证不遮挡鼠标路径。
- 必须移除
.dropdown-menu上的display: none，改用visibility: hidden+opacity: 0 - 所有嵌套菜单需设置
position: absolute，且父级.dropdown要设position: relative - 子菜单的
top和left需精确对齐，避免悬停区域出现“断连”（鼠标移出后菜单消失）
如何写一个兼容 Bootstrap 5 的纯 CSS 多级悬停规则？
Bootstrap 5 的下拉结构是：<li class="dropdown">
<a class="dropdown-toggle"></a><ul class="dropdown-menu">...</ul>
</li>，子菜单也是 <ul class="dropdown-menu"></ul> 嵌套在 <li class="dropdown"> 里。关键在于逐层激活：
.dropdown:hover .dropdown-menu {
display: block;
visibility: visible;
opacity: 1;
transform: translateY(0);
}
.dropdown-menu {
display: block !important;
visibility: hidden;
opacity: 0;
transform: translateY(-5px);
transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
}
.dropdown-menu .dropdown:hover .dropdown-menu {
top: 0;
left: 100%;
margin-top: -1px;
}
注意：这里没用 display: none，所以子菜单始终参与布局流，hover 路径连续；transform 替代 top/left 动画更流畅；margin-top: -1px 是为了消除 border 或 gap 导致的悬停中断。
哪些地方容易导致悬停“闪退”？
这不是浏览器 bug，而是 CSS 悬停路径被意外打断。常见原因：
-
.dropdown-menu和父<a></a>之间存在垂直间距（比如margin-bottom），鼠标经过间隙时触发:hover离开 - 子菜单
left: 100%后，右侧没有留出足够 hover 区域（尤其小屏幕），鼠标快速移动时脱靶 - Bootstrap 的
.dropdown-menu默认有min-width: 10rem，但父级<li>宽度不够，导致子菜单撑开后位置偏移，悬停区域错位 - 用了
overflow: hidden在父容器上（比如 navbar wrapper），裁掉了悬停中的子菜单，视觉上“消失”
要不要禁用 Bootstrap 的 dropdown.js？
要。否则 JS 会在点击或 focus 时强制 toggle show 类，和你的 CSS 规则冲突——比如鼠标悬停展开后，点一下菜单项，JS 把 show 类删了，菜单瞬间收起。
最稳妥的做法是移除相关初始化：
// 移除所有 dropdown 初始化
document.querySelectorAll('.dropdown').forEach(el => {
el.classList.remove('show');
});
// 或直接不引入 bootstrap.bundle.js，只用 bootstrap.css
如果项目已依赖 JS 下拉逻辑（比如移动端点击展开），那就得用媒体查询做响应式分离：PC 端用 CSS hover，移动端保留 JS 控制，通过 @media (max-width: 991.98px) 关闭 hover 样式并恢复 JS 行为。
真正麻烦的从来不是写几行 CSS，而是让每一级菜单的定位、过渡、z-index 和 hover 区域严丝合缝。哪怕一个像素的错位，用户就会觉得“不跟手”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
