bootstrap 5 的 dropdown 插件原生不支持 hover 触发，需通过 js 显式调用 show()/hide() 并结合 matchmedia 判断设备支持性，纯 css 方案会破坏可访问性和移动端体验。
Bootstrap 5 默认不支持悬停触发，不是你配置错了
直接加 data-bs-trigger="hover" 没反应，不是漏写 JS 或样式加载顺序问题——是 Bootstrap 5 的 Dropdown 插件压根没实现 hover 监听逻辑。源码里只处理 click 和 focus，data-bs-trigger="hover" 在初始化时被忽略，DOM 上留着只是占位。常见现象：属性存在、控制台无报错、鼠标移入菜单静默不动。
必须用 JS 显式调用 show()/hide()，不能只靠 CSS
绕过 Bootstrap 状态管理、直接写 .dropdown:hover .dropdown-menu { display: block; } 会破坏焦点流、键盘导航失效、aria-expanded 不同步，且移动端可能误触发。正确做法是监听事件后调用官方 API：
- 给外层容器加自定义 class（如
.dropdown-hover），避免全局污染 - 确保已加载 Bootstrap 5 的 JS（不是仅引入 CSS）
- 用
bootstrap.Dropdown.getInstance(dropdown)?.show()而非手动增删show类 - 加防抖延迟（如
setTimeout(..., 150)）防止鼠标划过子菜单时闪退
移动端必须降级回 click，别信“纯 CSS 适配”
触摸设备没有真正 hover，matchMedia('(hover: hover)') 是唯一可靠判断依据。纯 CSS 方案在 iPad 或 Surface 上极易卡住菜单或点击失灵。实操要点：
- 只在
matchMedia('(hover: hover)').matches为true时绑定mouseenter/mouseleave - 保留原生
data-bs-toggle="dropdown"，确保键盘用户仍能用Enter或Space展开 - 二级菜单必须用
.dropdown-submenu包裹，否则 CSS 无法穿透 hover 状态到子级
别碰 bootstrap-hover-dropdown 插件，尤其在 Bootstrap 5 项目里
这个插件基于 jQuery + Bootstrap 3/4，与 Bootstrap 5 的 ES 模块机制不兼容。典型失败场景：脚本加载顺序错（插件在 bootstrap.min.js 前）、动态插入菜单后未重绑定、delay 设太长导致多级菜单堆叠遮挡。如果你已在用它，升级到 Bootstrap 5 后必须替换为原生 JS 方案——否则 dropdownHover() 调用会静默失败，且无法调试。
