Bootstrap 5 默认禁用悬停触发下拉菜单，因JS未实现hover逻辑且CSS移除相关规则；需结合@media(hover:hover)和focus-within、手动调用show()/hide()及防抖处理，并确保可访问性支持。
bootstrap 5 默认不支持悬停触发下拉菜单，这不是配置遗漏或代码错误，而是框架主动移除的行为——你加 data-bs-trigger="hover"、写 .dropdown:hover .dropdown-menu { display: block; } 都不会生效，因为 js 层没监听 mouseenter，css 层也删掉了对应规则。
为什么原生 data-bs-trigger="hover" 不起作用
Bootstrap 5 的 Dropdown 构造函数里压根没实现 hover 触发逻辑。文档虽列出该属性，但仅作为占位符或未来扩展预留；实际初始化时，它会被忽略，最终只响应 click 和 focus。常见现象是：控制台无报错，DOM 上写了属性，鼠标移入却毫无反应。
-
data-bs-trigger="hover"必须配合手动 JS 调用show()/hide()才能生效，单独存在无效 - 即使加了该属性，
.dropdown-menu仍受 Bootstrap 的show类控制，纯 CSS 强制display: block会绕过焦点管理、aria-expanded同步和动画逻辑 - 移动端（包括 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防抖关闭（建议hide延迟 200–300ms），避免鼠标从触发器移到菜单途中因间隙导致闪退
示例关键片段：
// 确保 DOM 就绪后执行
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 官方不定义多级菜单结构，所以仅靠嵌套 .dropdown-menu 无法精准控制子菜单悬停穿透。CSS 的 :hover 无法跨元素“延续”，鼠标一离开一级项就收起，二级菜单根本展不开。
- 必须用
