bootstrap下拉菜单默认不响应:hover，因其依赖js监听click事件并控制显隐状态；纯css方案需彻底禁用js初始化、移除data-bs-toggle属性，改用.hover触发display/opacity/visibility过渡，并通过@media(hover:hover)and(pointer:fine)适配指针设备。
Bootstrap 默认的下拉菜单（dropdown）依赖 JavaScript 监听 click 事件，不支持纯 CSS 的 :hover 触发。想用纯 CSS 实现悬浮展开，必须绕过 Bootstrap 的 JS 初始化逻辑，直接操作 DOM 结构和样式。
为什么原生 Bootstrap dropdown 不响应 :hover
Bootstrap 5+ 的 dropdown 组件默认禁用 :hover 行为，原因很实际：移动端无 hover，且防止在触摸设备上误触发。它的 JS 会主动移除 show 类（除非显式配置 trigger: 'hover'），但即使开了该选项，也仅限于桌面端「模拟 hover」，底层仍依赖 JS —— 这不是纯 CSS 方案。
所以，要纯 CSS，就得放弃 data-bs-toggle="dropdown" 和所有 JS 初始化，手动控制类名和过渡。
如何用纯 CSS 替换 dropdown 的 JS 行为
核心思路是：保留 Bootstrap 的 HTML 结构（便于复用样式），但删掉所有 JS 相关属性，用 :hover + .dropdown-menu 的显示/隐藏控制替代。
- 移除
data-bs-toggle="dropdown"和aria-expanded属性，它们对纯 CSS 无意义，还可能被 JS 干扰 - 确保父容器
.dropdown是position: relative（Bootstrap 默认已设，无需改） - 给
.dropdown-menu添加display: block并配合opacity和visibility做平滑过渡 - 用
.dropdown:hover .dropdown-menu触发展开，而不是依赖.show类 - 补上
pointer-events: none到隐藏状态的菜单，避免悬停穿透干扰
示例关键 CSS：
.dropdown-menu {
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
pointer-events: none;
}
.dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
兼容性与移动端适配要注意什么
纯 :hover 在 iOS Safari 和 Android Chrome 上表现不稳定：部分机型首次点击会触发 hover，之后才正常；有些则完全忽略 hover（尤其在 meta viewport 缩放后）。这不是 Bug，而是浏览器策略。
- 不要指望它在 iPad 或折叠屏手机上可靠工作 —— 它们本质是触摸优先设备
- 如果项目需兼顾移动端，建议用媒体查询降级：
@media (hover: hover) and (pointer: fine)包裹 hover 样式，否则默认收起 - 避免在导航栏一级菜单用纯 hover，二级菜单可接受；一级仍推荐 click 或 focus-within（后者需键盘用户支持）
- 测试时务必真机连 Safari Web Inspector 调试，模拟器常有误导
和 Bootstrap 原生 JS 共存的风险点
如果你没彻底移除 Bootstrap 的 JS 初始化（比如全局调用了 new bootstrap.Dropdown()），它会在你 hover 时检测到菜单未处于 show 状态，自动重置 DOM，导致菜单闪退或无法展开。
- 检查是否引入了
bootstrap.bundle.js或手动初始化了Dropdown - 若必须共存，可在初始化时排除目标元素：
document.querySelectorAll('.dropdown.css-only')，然后只初始化非该类的节点 - 更稳妥的做法是：整个项目统一策略 —— 要么全 JS，要么全 CSS，混用极易出竞态
真正麻烦的从来不是写几行 :hover，而是确认 JS 是否彻底退出了你的下拉菜单生命周期。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
