Bootstrap下拉菜单默认不响应:hover是因为其依赖JS控制显示状态，.dropdown-menu初始为display:none且JS会重置样式；解决方案分两类：禁用JS改纯CSS悬停，或保留JS并用mouseenter事件手动触发。
为什么 dropdown-menu 默认不响应 :hover
Bootstrap（尤其是 v5.x）的下拉菜单默认依赖 JavaScript 触发，dropdown-menu 在未激活时是 display: none，且被包裹在 data-bs-toggle="dropdown" 的触发元素里。纯 CSS 的 :hover 无法穿透 JS 控制的显示逻辑，直接写 .dropdown:hover .dropdown-menu { display: block; } 往往无效——因为父级 .dropdown 本身没被 JS 标记为 “show” 状态，JS 会重置样式。
最稳妥的方案：禁用 JS 并用纯 CSS 实现悬停
如果你确定不需要移动端点击展开、也不依赖 Dropdown 的事件钩子（如 shown.bs.dropdown），可完全绕过 Bootstrap JS：
- 移除所有
data-bs-toggle="dropdown"和data-bs-auto-close属性 - 确保下拉容器（
.dropdown-menu）是.dropdown的直接子元素 - 添加以下 CSS（需放在 Bootstrap CSS 之后）：
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu {
margin-top: 0; /* 覆盖 Bootstrap 默认的 top: 100% + margin-top */
}
.dropdown-menu.show { /* 清除 JS 可能残留的 .show 类干扰 */
display: block !important;
}注意：!important 是为了压制 Bootstrap JS 注入的内联 style="display: block"，否则悬停时可能闪烁或失效。
保留 JS 但兼容悬停：监听 mouseenter 手动触发
如果必须保留 Bootstrap 的 JS 功能（比如需要键盘导航、事件回调或移动端 fallback），不能直接删 JS，就得用 JS 补充逻辑：
立即学习“前端免费学习笔记（深入）”；
- 给每个
.dropdown添加data-bs-trigger="hover"（自定义标记，非 Bootstrap 原生） - 在页面加载后运行这段代码：
document.querySelectorAll('.dropdown[data-bs-trigger="hover"]').forEach(dropdown => {
const trigger = dropdown.querySelector('[data-bs-toggle="dropdown"]');
const bsDropdown = bootstrap.Dropdown.getInstance(trigger) ||
new bootstrap.Dropdown(trigger);
<p>dropdown.addEventListener('mouseenter', () => bsDropdown.show());
dropdown.addEventListener('mouseleave', () => {
setTimeout(() => {
if (!dropdown.matches(':hover')) bsDropdown.hide();
}, 100);
});
});关键点：setTimeout 是为了防抖——避免鼠标划过子菜单时误触发关闭；!dropdown.matches(':hover') 确保只在真正离开整个下拉区域后才隐藏。
移动端适配与常见坑
悬停在触摸设备上无意义，强行启用会导致体验断裂：
- 不要用
@media (hover: hover)简单包裹悬停 CSS——iOS Safari 和部分安卓浏览器会错误报告hover: hover，导致菜单意外展开 - 更可靠的做法是检测
pointer: coarse或 UA 字符串，但简单项目建议直接加媒体查询：@media (min-width: 992px)（仅桌面） - 若用了上述 JS 方案，务必加上
if ('ontouchstart' in window) return;开头，避免在手机上绑定mouseenter - Bootstrap v5.3+ 的
dropdown-menu默认带data-bs-popper，若用纯 CSS 悬停，Popper 定位可能错乱——需手动加position: static到.dropdown-menu或改用data-bs-display="static"
悬停菜单真正的难点不在“怎么显示”，而在“什么时候不该显示”——设备类型、焦点状态、键盘操作、过渡动画中断，这些边界情况比样式本身更耗调试时间。
