纯css无法实现路由跳转后自动展开或点击互斥收起等“自动”逻辑，因其无状态记忆、不感知路由、无事件监听能力；:hover仅响应瞬时悬停，移动端不可靠且不支持键盘操作，复杂交互必须交由js控制data-open或class，css仅负责显隐样式与过渡动画。
纯 CSS 无法实现“自动展开”逻辑——所谓“自动”，比如路由跳转后展开对应父级，或点击某项后收起其他兄弟项，这些都超出 :hover 能力范围。 :hover 只响应瞬时悬停状态，不维护历史、不感知路由、不触发互斥，强行用它模拟“自动”，结果必然是闪退、错位、键盘不可用、移动端失效。
为什么 .dropdown-item:hover .dropdown-menu 总是不显示
最常见原因是父级没建立定位上下文，导致子菜单 absolute 定位漂移或被裁剪。:hover 规则本身可能已生效（DevTools 里能看到 class 匹配），但子菜单根本不在可视区。
- 检查每一级触发项（如
.dropdown-item、.nav-item）是否都设了position: relative - 确认子菜单（如
.dropdown-menu）用了position: absolute+top: 100%（一级）或left: 100%（二级起），而非top: 0; left: 0 - 父容器或祖先元素是否误加了
overflow: hidden—— 它会直接截掉溢出的子菜单 - 浏览器 DevTools 中查看 computed
z-index，确认子菜单是否因层叠上下文隔离而被压在底层
:hover 嵌套在移动端完全不可靠
iOS 和 Android 上，:hover 不是“悬停”，而是点击后的短暂模拟状态。用户点一次，菜单闪一下就收；点两次，直接跳转——这不是 bug，是规范行为。
- 别在
@media (max-width: 768px)里写.dropdown-item:hover .dropdown-menu { display: block; }，这会让所有子菜单默认展开，失去控制权 - 正确降级方式是用
@media (hover: none), (pointer: coarse)主动禁用 :hover 显隐逻辑 - 必须同时保留
:focus-within，并确保可聚焦元素（如<a></a>或<button></button>）存在且有tabindex="0" - 若需点击展开，必须用
data-open+ CSS 控制，而不是依赖 :hover
多级嵌套时层级错乱的根源是层叠上下文
明明写了 z-index: 9999，三级菜单还是被二级盖住？大概率是某个祖先元素悄悄创建了新层叠上下文（如设置了 transform、opacity 、<code>will-change），把子菜单锁死在局部渲染层内。
- 用浏览器 DevTools 的 “Layers” 面板确认是否意外创建了多个 stacking context
- 避免在导航容器上滥用
transform动画；如需过渡，优先用translate替代top/left - 所有菜单层级应共享同一层叠上下文：最外层
nav设一个基础z-index（如z-index: 100），子菜单靠自然堆叠，不额外设值 - Bootstrap 等框架中，注意
.navbar（z-index: 1000）、.modal（z-index: 1055）等预设值，子菜单至少要比其父容器高 1
真正需要“自动展开”的场景（如路由激活时展开父级、点击一项关闭其他），CSS 没有状态机，也没有事件监听能力。这时候该交由 JS 控制 data-open 或 class 切换，CSS 只负责显隐样式和过渡动画——把职责切清楚，反而更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
