z-index失效主因是子菜单未定位或被父级堆叠上下文锁死：必须设position: absolute且父级为relative；transform/opacity/filter等会创建新上下文，使z-index仅在内部生效；hover断链源于dom空隙或选择器过宽；overflow:hidden会裁剪绝对定位的子菜单。
多层级下拉菜单在纯CSS中能做，但“优雅”取决于你是否绕开了那几个必踩的坑——z-index失效、:hover断链、overflow: hidden意外裁剪，三者任一出问题，菜单就卡在半空或直接消失。
为什么子菜单明明写了 z-index: 999 还是被遮住？
根本原因不是 z-index 数值不够大，而是它压根没生效，或者生效了但被父级堆叠上下文锁死了。
-
z-index只对position值为relative、absolute、fixed或sticky的元素起作用；写在position: static（默认）上等于没写 - 如果子菜单的某个祖先元素（比如导航栏容器）设置了
transform、opacity或filter，它就会创建新的堆叠上下文——此时子菜单的z-index只在该上下文内比较，再高也盖不过同级的导航项 - 最常见错误：把
.dropdown-content设成position: relative。它必须是absolute，且其直接父级（如li.dropdown）必须设position: relative，否则定位参考点错乱，z-index失去锚点
三级菜单 hover 时一闪而过，鼠标移过去就收回去？
这不是动画问题，是 DOM 结构和选择器链没对齐导致的悬停状态中断。
- 一级
li和二级ul之间存在像素级空隙（哪怕只有 1px），:hover状态立刻丢失，浏览器认为“已移出”，于是触发display: none - 选择器不能偷懒：
.menu li:hover ul是错的——它匹配所有后代，会导致三级菜单在一级 hover 时就提前显示；正确写法必须显式写出每一层嵌套关系：.first-level > li:hover > .second-level和.second-level > li:hover > .third-level - HTML 中每级可展开的
li必须带明确 class（如class="has-sub"），对应写.has-sub:hover > ul，避免用泛化的li:hover ul污染其他列表
overflow: hidden 怎么偷偷干掉你的下拉菜单？
它不报错、不警告，只是默默把超出边界的 position: absolute 子菜单裁掉——尤其在响应式导航栏里高频出现。
- 检查从
body到子菜单路径上的每一个父容器，只要其中任意一个设了overflow: hidden或overflow: auto，且子菜单位置超出其边界，就会被截断 - 不要在导航栏外层容器（比如
.nav-wrapper）上加overflow: hidden来“清浮动”或“防溢出”——改用display: flex或display: grid布局，它们天然不产生浮动问题 - 如果必须保留
overflow: hidden（例如轮播图容器），就把下拉菜单节点用 JavaScript 移到body底下渲染，否则 CSS 无解
真正难的从来不是写几行 display: block，而是理解 position 如何建立定位参考、z-index 在哪一层有效、以及 hover 状态如何被 DOM 结构和空隙物理打断——这些细节不厘清，再多的 transition 动画也只是在错误的路上跑得更顺滑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
