Bootstrap 5 默认禁用悬停触发下拉菜单，因源码未实现 hover 事件监听；需结合@media(hover:hover)和(focus-within)、JS手动调用show()/hide()及防抖处理，方能安全启用。
bootstrap 5 默认不支持悬停触发下拉菜单，这不是你漏写了属性或 js 加载错了——是框架主动移除的逻辑。直接加 data-bs-trigger="hover" 不生效，纯 css 写 .dropdown:hover .dropdown-menu { display: block; } 会破坏焦点管理、aria-expanded 同步和动画，且移动端可能误触发。
为什么 data-bs-trigger="hover" 单独写没用
Bootstrap 5 的 Dropdown 构造函数里压根没实现 hover 的事件监听。文档中保留该属性，仅作占位或未来扩展预留；初始化时它被忽略，最终只响应 click 和 focus。常见现象是：DOM 上属性存在、控制台无报错、鼠标移入却完全静默。
-
data-bs-trigger="hover"必须配合手动 JS 调用show()/hide()才能起效，否则只是个装饰 - 即使加了该属性，
.dropdown-menu的显隐仍由 Bootstrap 的show类控制，绕过它直接操作display会导致键盘导航失效、屏幕阅读器无法感知状态 - 移动端（包括 Surface 等二合一设备）若被错误识别为 hover 设备，菜单可能卡住或点击失灵
安全启用悬停的最小可行方案（CSS + JS）
核心是只在真正支持精细指针 + 明确 hover 能力的设备上启用，同时保留键盘可访问性。不能靠 UA 判断，得用环境特征检测。
- 用
@media (hover: hover) and (pointer: fine)包裹悬停相关 CSS，确保仅在鼠标/触控板设备生效 - 给
.dropdown添加:focus-within规则：.dropdown:focus-within .dropdown-menu { display: block; }，让 Tab 导航用户也能展开 - JS 中监听
mouseenter/mouseleave，调用bootstrap.Dropdown.getInstance(el).show()和.hide()，而非直接改 DOM - 关闭加
setTimeout防抖（建议延迟 200–300ms），避免鼠标从触发器移到菜单途中因间隙导致闪退
document.addEventListener('DOMContentLoaded', () => {
const dropdowns = document.querySelectorAll('.dropdown');
dropdowns.forEach(d => {
const instance = bootstrap.Dropdown.getInstance(d);
d.addEventListener('mouseenter', () => instance?.show());
d.addEventListener('mouseleave', () => {
setTimeout(() => instance?.hide(), 250);
});
});
});
二级菜单悬停必须用 .dropdown-submenu 结构
Bootstrap 5 官方不提供二级悬停支持，也未定义 .dropdown-submenu 类。但若你要做，必须手动补结构与样式，否则 .dropdown-item:hover .dropdown-menu 选择器会失效——因为默认的 .dropdown-menu 是绝对定位在父级 .dropdown 下，不是紧贴 .dropdown-item。
- 一级
.dropdown-item需设position: relative - 二级菜单需挂载在对应
.dropdown-item内部，并显式设z-index（至少比父级高 1） - 若父容器有
overflow: hidden或动画 transform，z-index 会失效，得把二级菜单提到同级 DOM 再用 JS 动态定位 - 移动端必须降级为点击展开，不能依赖 hover 路径连续性
真正难的不是让菜单“动起来”，而是悬停路径连续、焦点不丢失、移动端不误触、键盘仍可用——这些全靠媒体查询边界、focus-within 精度、防抖时机和 DOM 结构控制，缺一不可。
