纯css :hover失效主因是触发器与菜单间存在视觉间隙导致mouseleave误触发，且需配合position、transition及媒体查询才能稳定。
纯 CSS 的 :hover 规则为什么经常失效
直接写 .dropdown:hover .dropdown-menu { display: block; } 看似合理，但多数情况下菜单一闪就收——根本不是代码漏了，而是触发器和菜单之间存在视觉间隙，mouseleave 在鼠标划过空隙时立刻触发，Bootstrap 的隐藏逻辑随即执行。更隐蔽的问题是：.dropdown-menu 默认 display: none 且父级 .dropdown 没有 position: relative，导致子菜单定位漂移甚至被截断。
:hover 必须搭配 position 和 transition 才稳定
仅控制 display 会破坏动画、焦点管理和可访问性（aria-expanded 不同步）。正确做法是用 opacity + transform 配合过渡，并确保层级可控：
- 给
.dropdown加position: relative - 重置
.dropdown-menu初始状态：opacity: 0; transform: translateY(-5px); transition: opacity 0.2s, transform 0.2s; - 悬停规则必须写成：
.dropdown:hover .dropdown-menu { opacity: 1; transform: translateY(0); } - 移动端必须包裹媒体查询：
@media (hover: hover) and (pointer: fine) { ... }，否则 iOS/Android 上轻点会误展开
桌面端要跳转，移动端要点开？href 得动态控制
如果下拉主项是个带 href 的链接（比如“服务”指向 /services.html），纯 :hover 会让桌面用户悬停即展开、点击却跳走——这和预期冲突。真实场景中需要：
- 桌面端：悬停时恢复
href，移出时设为#防误跳 - 移动端：始终禁用
href，只靠 Bootstrap 默认 click 展开 - 检测方式不能只靠
'ontouchstart' in window，要补navigator.maxTouchPoints > 0兼容 Safari - 事件必须绑定在触发元素上（如
#nav_service_object），而非整个.dropdown容器
多级菜单的 :hover 路径容易写错
二级菜单不是靠 .dropdown-menu:hover .dropdown-menu，那是无效选择器。它依赖的是触发它的那个 .dropdown-item 是否处于悬停态：
- 父级
.dropdown-item必须设position: relative - 二级菜单用
.dropdown-item:hover .dropdown-menu或.dropdown-item:hover + .dropdown-menu（取决于 HTML 结构） - 二级菜单自身需加
position: absolute; top: 0; left: 100%，并显式设z-index（至少比父级高 1） - 若父容器有
transform（如.navbar-collapse动画），z-index会失效，得把二级菜单提到同级 DOM 中再用 JS 定位
真正难的不是写出 hover 效果，而是让悬停路径连续、焦点不丢失、移动端不误触、键盘仍可用——这些全靠 CSS 选择器精度和媒体查询边界控制，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
