bootstrap 5 默认禁用 hover 触发下拉菜单，需移除 data-bs-toggle 并手动控制 .show 类或改用纯 css hover 方案，但存在移动端失效、无障碍缺失等风险。
hover伪类在Bootstrap 5中默认不生效
Bootstrap 5 移除了对 :hover 触发下拉菜单的支持，所有下拉行为必须依赖 JavaScript（Dropdown 插件）触发。直接写 .dropdown-menu:hover 不会显示子菜单，因为父级 .dropdown 的 data-bs-toggle="dropdown" 会接管交互逻辑，且默认禁用 hover 行为。
如果你坚持用纯 CSS hover 实现多级菜单，必须绕过 Bootstrap 的 JS 控制——即移除 data-bs-toggle 属性，并手动管理 .show 类的添加/移除逻辑，或完全弃用 Dropdown 组件结构。
如何让二级菜单在 hover 时展开（需修改 HTML 结构）
Bootstrap 官方的多级下拉（如 dropdown-submenu）在 v5+ 中已不被支持，需自行扩展结构。关键点是：子菜单必须嵌套在父项的 <li> 内，并用 :hover 控制其 .dropdown-menu 的 display 或 opacity。
- 父
<li>必须设position: relative（Bootstrap 默认有） - 子
.dropdown-menu需加position: absolute和top: 100%，并初始隐藏（display: none或opacity: 0） - 触发条件写成
.dropdown-item:hover + .dropdown-menu, .dropdown-menu:hover，避免鼠标移出时闪退 - 推荐用
opacity+visibility替代display，便于加 transition 动画
示例片段：
必须覆盖的 Bootstrap CSS 冲突规则
Bootstrap 5 的 .dropdown-menu 默认有 display: none，且被 .dropdown.show > .dropdown-menu 控制显隐。若你不用 JS，这些规则会干扰 hover 效果。
需在自定义 CSS 中强制覆盖：
- 清除 JS 注入的
.show类影响：.dropdown-menu { display: block !important; opacity: 0; visibility: hidden; } - 用
.dropdown:hover > .dropdown-menu, .dropdown-menu:hover恢复显示：opacity: 1; visibility: visible; - 禁用移动端点击穿透问题：加
@media (pointer: coarse) { ... }回退为 click 触发（否则触屏设备无法展开） - 注意
z-index：子菜单层级可能被父容器裁剪，需确保父<li>有overflow: visible
移动端适配和可访问性风险
纯 hover 方案在触摸设备上基本失效——iOS Safari 和 Android Chrome 不触发 :hover（除非模拟），且屏幕阅读器无法感知悬停状态。这不是“加个媒体查询就能修好”的问题，而是交互模型根本冲突。
如果项目需兼顾移动和无障碍：
- 不要强行用 hover 模拟下拉；改用 Bootstrap 原生
Dropdown+data-bs-auto-close="outside"配合点击展开 - 若必须多级，考虑用
accordion替代，或引入轻量 JS 库如smartmenus - 至少保留键盘导航支持：用
tabindex="0"+focus伪类补 hover 缺失路径
hover 多级菜单看着简单，但真正在生产环境跑通，要同时处理 CSS 层叠、JS 干预、触摸事件、焦点管理、缩放适配……这些细节比写几行 :hover 多得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
