Bootstrap 5 默认禁用 dropdown-menu 的 hover 触发，仅支持 click/focus；需通过 CSS（配合 @media 适配移动端）或 JS（注意 touchstart 冲突与 Popper 集成）手动实现，同时须处理 Safari 闪退、定位错乱及 overflow 截断等边界问题。
Bootstrap 5 默认不支持 dropdown-menu 的 hover 触发
Bootstrap 5 移除了对 :hover 触发下拉菜单的原生支持，只保留点击（click）和焦点（focus）两种方式。这不是 bug，是设计取舍——为移动端兼容性让路。如果你在桌面端需要 hover 展开，必须手动干预 CSS 或 JS。
用纯 CSS 实现 hover 需要覆盖 .dropdown 的 :focus-within 行为
Bootstrap 5 的下拉依赖 :focus-within 模拟“悬停感”，但该伪类在鼠标移入时不会自动激活。直接加 :hover .dropdown-menu 会失效，因为 .dropdown-menu 默认 display: none，且父级 .dropdown 没有触发状态。
- 给
.dropdown添加position: relative（确保子菜单定位正常） - 用
.dropdown:hover .dropdown-menu强制显示，同时补上过渡动画避免突兀：.dropdown:hover .dropdown-menu { display: block; opacity: 1; transform: translateY(0); } - 必须重置
.dropdown-menu的opacity和transform初始值，否则动画无效：.dropdown-menu { opacity: 0; transform: translateY(-5px); transition: opacity 0.2s, transform 0.2s; } - 移动端需禁用 hover：用
@media (hover: hover) and (pointer: fine)包裹上述规则，避免触屏设备误触发
JS 方案更可靠，但要注意 touchstart 冲突
纯 CSS 在某些浏览器或嵌套结构中可能失灵，JS 是兜底选择。核心是监听 mouseenter/mouseleave，并手动 toggle show 类。
- 不要直接操作
display，而是 toggle Bootstrap 的show类：document.querySelectorAll('.dropdown').forEach(dropdown => { dropdown.addEventListener('mouseenter', () => { dropdown.classList.add('show'); }); dropdown.addEventListener('mouseleave', () => { dropdown.classList.remove('show'); }); }); - 必须阻止
touchstart事件穿透，否则 iOS 上第一次触摸会触发 hover，第二次才真正点击 —— 加if ('ontouchstart' in window) return;判断 - 如果页面用了 Popper.js（Bootstrap 5 默认），需调用
bootstrap.Dropdown.getInstance(el).toggle()而非硬切类，否则定位错乱
hover 下拉菜单在 Safari 和低版本 Edge 中容易闪退
根本原因是 mouseleave 在菜单与触发按钮之间有空隙时提前触发，尤其当 .dropdown-menu 有 margin-top 或父容器有 gap 时。
- 把
.dropdown-menu的margin-top改成top: 100%+margin-top: 0，用绝对定位消除间隙 - 给
.dropdown增加一个透明的、高度足够的::after伪元素，桥接按钮和菜单之间的空白区域 - 延迟隐藏：用
setTimeout延迟remove('show')100ms，给鼠标移动留出余量
hover 下拉最麻烦的不是实现，而是边界条件——菜单是否遮挡导航栏、是否被 overflow: hidden 截断、是否在模态框里失效。这些得一个个现场看 DOM 结构，没法靠一套代码通吃。
