bootstrap 5 默认不支持悬停触发下拉菜单，因js未实现hover监听且data-bs-trigger="hover"仅为占位符；纯css方案失效是因js会重置display，须结合@media(hover:hover)和(pointer:fine)、js调用show()/hide()及防抖处理方可安全启用。
为什么纯 CSS 的 .dropdown:hover .dropdown-menu 在 Bootstrap 5 里不生效
因为 Bootstrap 5 的 Dropdown JS 插件压根没实现 hover 触发逻辑，data-bs-trigger="hover" 只是占位符，不监听 mouseenter；同时默认 CSS 把 .dropdown-menu 设为 display: none，而 :hover 无法穿透不可见元素。你写再多 .dropdown:hover .dropdown-menu { display: block }，JS 层仍会立刻把它重置回隐藏状态——不是样式没加载，是 JS 在“打架”。
必须用 @media (hover: hover) and (pointer: fine) 隔离桌面设备
直接全局启用悬停，会在 Surface 等二合一设备、甚至部分 Android Chrome 上误触发，导致点击失效或菜单卡住。真正安全的做法是只在明确支持精细指针且具备 hover 能力的设备上启用：
-
@media (hover: hover) and (pointer: fine)是唯一可靠的环境检测方式，比 UA 判断或matchMedia('(max-width: 768px)')更准确 - 所有悬停相关 CSS（包括子菜单定位、显隐过渡）必须包裹在这段媒体查询里
- 移动端和触屏设备自动回落到原生 click 行为，无需额外 JS 降级
二级菜单定位必须用 top: 0; left: 100% + margin-top: -1px
Bootstrap 5 默认的 .dropdown-menu 是向下展开的，但二级菜单要向右平铺。如果只设 left: 100%，父级 .dropdown-item 的 border 或 padding 会制造悬停断连——鼠标一移过去就闪退。关键细节：
-
.dropdown-menu .dropdown-menu必须设position: absolute，且父级.dropdown-item或.dropdown-submenu得有position: relative -
margin-top: -1px是为了抵消父容器底边框或像素级间隙，不是凭空加的 - 避免用
transform: translateX(100%)替代left: 100%，否则 Popper.js 定位可能错乱
JS 必须调用 instance.show()/instance.hide()，不能直接操作 DOM
绕过 Bootstrap 实例直接改 display 或加 show 类，会导致 aria-expanded 不同步、键盘 Tab 进入时菜单消失、ESC 关闭失效。正确做法是：
- 在
DOMContentLoaded后遍历所有.dropdown，用bootstrap.Dropdown.getInstance(el)获取实例 -
mouseenter时调用instance.show()，mouseleave时用setTimeout(() => instance.hide(), 250)防抖 - 必须保留原生
data-bs-toggle="dropdown"，否则焦点管理、动画、A11Y 全部崩坏
最易被忽略的点：多级菜单的每个子级 .dropdown 都得单独初始化实例，不能只绑一级；.dropdown-submenu 这类自定义 wrapper 本身不触发 Popper 定位，必须确保它内部包含一个合法的 .dropdown 容器结构。
