17370845950

子菜单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。