子菜单hover失效主因是父级li未设position:relative导致定位错乱，或子菜单DOM不在li内；多级菜单需每层独立relative/absolute定位、递增z-index及间隙容错；动画须用opacity/visibility/transform组合，禁用display过渡；移动端需@media区分设备并JS fallback。
hover 伪类下子菜单显示失效的常见原因
直接写 .menu > li:hover .submenu { display: block; } 却没反应？大概率是子菜单默认用了 display: none;，但父级 li 没设 position: relative;，导致子菜单脱离文档流后定位错乱或被裁剪。另外，如果子菜单在 DOM 中不在 li 内部（比如被 Vue/React 渲染到 body 下），:hover 根本触达不到。
多级菜单必须加的 CSS 定位与层级控制
每一层展开菜单都需要独立的定位上下文和 z-index 管理，否则二级菜单可能被一级遮住，或鼠标移出就收起：
-
li必须设position: relative; - 子菜单（如
.submenu）用position: absolute;+top: 100%;实现向下展开；二级菜单则额外加left: 100%; top: 0;实现右向展开 - 每级菜单建议设
z-index递增，例如一级z-index: 100;，二级z-index: 101; - 为避免 hover 断连，可在
li和.submenu之间留出10px间隙区域（用margin-bottom或padding-bottom），再配合transition-delay给一点容错时间
hover 展开时的过渡与动画控制技巧
纯 display 切换无法过渡，必须改用 opacity + visibility + transform 组合：
.submenu {
opacity: 0;
visibility: hidden;
transform: translateY(-5px);
transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}
.menu > li:hover .submenu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
注意：不要对 display 做 transition —— 它不触发重绘，过渡无效。同时避免在 :hover 中直接操作 height，因为高度不确定时需 JS 配合，CSS 里难以可靠计算。
立即学习“前端免费学习笔记（深入）”；
移动端 hover 失效与 fallback 方案
手机端没有 hover，纯 CSS 的 :hover 多级菜单在 iOS/Android 上点一次展开、再点才收起，体验割裂。若必须支持触屏，可：
- 用
@media (hover: hover) and (pointer: fine)区分精细指针设备，只对这类设备启用 hover 展开 - 触屏设备降级为点击展开：给
li加role="button"，用 JS 切换aria-expanded和 class 控制显隐 - 避免在触屏上依赖「悬停即展开」，尤其三级以上菜单——手指精度低，容易误触
真正难的不是写出 hover 样式，而是让各级菜单在悬停路径中不闪跳、不消失、不遮挡，且在不同设备上有合理退化。这需要反复调试 position、z-index 和触发区域间距，而不是堆砌 transition。
