bootstrap 5 默认不支持悬停展开下拉菜单，需通过css强制实现二级菜单悬停展开，并配合js回退逻辑确保多端兼容性。
Bootstrap 5 默认不支持悬停展开下拉菜单
Bootstrap 5 移除了对 :hover 触发下拉菜单的原生支持，所有下拉（包括二级菜单）默认只响应点击。如果你看到“悬停就展开”，那一定是自己加了 CSS 或 JS 补丁，或者误用了旧版文档（如 Bootstrap 4 的某些定制版）。
要实现二级菜单悬停展开，必须手动干预——不是改配置项，而是覆盖默认行为。
用 CSS 强制启用 hover 展开二级菜单
核心思路：让 .dropdown-menu 在父级 .dropdown:hover 时显示，并确保二级菜单（即子 .dropdown-menu）在鼠标移入时保持可见。关键在于 z-index、display 和过渡时机的配合。
-
.dropdown:hover .dropdown-menu设为display: block（覆盖 JS 的show类控制逻辑） - 二级菜单需额外加一层
.dropdown-submenu包裹（否则.dropdown-item内的.dropdown-menu会被父级overflow: hidden切掉） - 必须设置
.dropdown-submenu .dropdown-menu的top: 0; left: 100%，并提升z-index避免被遮挡 - 移除
.dropdown-menu的opacity过渡（否则悬停时会闪一下）
.dropdown:hover .dropdown-menu,
.dropdown-submenu:hover .dropdown-menu {
display: block;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -2px;
margin-left: 0;
z-index: 1000;
}
.dropdown-menu {
opacity: 1;
transition: none;
}
HTML 结构必须带 .dropdown-submenu 嵌套
Bootstrap 官方不定义二级菜单结构，所以不能只靠 .dropdown-item + .dropdown-menu 堆叠。必须显式标记子菜单容器，否则 CSS 无法精准定位和悬停穿透。
- 一级菜单项用
<a class="dropdown-item"></a>，里面放文字 - 需要二级菜单的项，改用
<div class="dropdown-submenu"> 包裹，并加 <code>data-bs-toggle="dropdown" - 子菜单的
.dropdown-menu必须放在该.dropdown-submenu内部，不能丢到外层
移动端体验会断裂，必须加 JS 回退逻辑
纯 CSS 悬停在触摸设备上无效，而且桌面端右键或键盘导航也会出问题。如果只加 hover，用户用键盘 Tab 进入二级菜单项时，.dropdown-menu 会立刻消失（因为失去 hover 状态）。
- 建议保留 Bootstrap 原生 JS 的点击逻辑（
data-bs-toggle="dropdown"），再用 JS 监听mouseenter/mouseleave控制显示，而非完全弃用 JS - 检测
matchMedia('(hover: hover)')，仅在支持 hover 的设备上启用悬停，避免干扰移动用户 - 对
.dropdown-submenu的mouseleave加 200ms 延迟隐藏，防止鼠标划过间隙时菜单闪退
真正稳定的方案不是“只用 CSS”，而是“CSS 主力 + JS 保底”。很多人卡在悬停失效，其实是忘了设备能力判断这一步。
