CSS多级联动菜单样式实现方法

纯CSS多级联动菜单看着简单，真写起来却总是翻车：二级菜单不显示、三级菜单闪退、手机上点都点不开。这些问题看起来五花八门，根子其实都在几个关键点上——定位上下文没对齐、选择器链断在了半路、还有交互通道压根没通。说白了，不是写法不够花哨，是结构的几个约束没卡到位。

定位上下文缺失：子菜单飞到页面左上角

先说一个最常见的坑：子菜单用 position: absolute 结果飞到了页面左上角。这种时候，十有八九是直接父级的 li 忘了加 position: relative。绝对定位的参照逻辑是层层往上找最近的有定位祖先节点——找不到，就干脆拿视口当基准，跟你期待的位置差飞了。所以，所有可能展开子菜单的 li（从一级到三级甚至更深）都得老老实实加上 position: relative。注意，display: flex 不会自动创建定位上下文，不能拿它蒙混过关。更别图省事给 body 或者 html 加 position: relative，那会把整个页面的定位基准都搞偏，得不偿失。

选择器链断裂：:hover 无法穿透多层DOM

接下来是 :hover 选择器的问题。CSS 的 :hover 不会自动穿透多层 DOM 去维持状态，它只响应鼠标直接悬停的当前元素，而且只有连续嵌套的后代才能正常响应。但凡有个层级漏了，下一级就彻底卡死。正确的写法是：二级菜单用 .first-level > li:hover > .second-level，三级菜单得把中间层补全，写成 .second-level > li:hover > .third-level。千万不要写 .menu li:hover ul ul 这种泛化选择器，它会同时匹配三层嵌套，很容易把不相干的子菜单也带出来，乱得没法收拾。如果 HTML 里用 class="has-sub" 标记了可展开项，那用 .has-sub:hover > .submenu 比泛泛的 li:hover 精准得多，也更安全。

悬停热区空隙：鼠标移向子菜单时闪退

鼠标移向子菜单的时候菜单突然闪退，这个现象很多人以为是动画延迟没配好，其实根本原因就在那一两像素的物理空隙上。鼠标从一级 li 划到二级 ul 的途中，要经过两者之间那一点点空白区域，:hover 状态会在那一瞬间丢失，菜单立刻收回去，连反应时间都没有。最稳的解法是给一级 li 加 padding-bottom: 12px，然后用 margin-bottom: -12px 把布局影响抵消掉，等于把悬停热区向下延伸，把那几像素的空隙盖住。如果是三级菜单向右展开，用 left: 100% 配合 top: -1px 对齐二级项的顶部，避免垂直方向上再搞出新的空隙。另外，子菜单统一设一个 min-width: 100%，防止内容太窄导致鼠标滑出触发区域。至于 transition-delay，千万别指望它来解决这个问题——它只管延迟动画的启动，并不延长 :hover 的有效周期，算不上救星。

移动端与键盘用户被忽略：交互通道没通

还有一类用户完全被 :hover 式菜单忽略了：移动端和键盘用户。iOS 或 Android 上，点击一次只能模拟 hover，第二次点击才能跳转链接；键盘用户按 Tab 进入一级菜单项，焦点直接跳走，二级内容根本不会出现。这不是兼容性问题，是交互模型本来就不一样。所以必须同时写两套规则：.dropdown:hover .submenu 和 .dropdown:focus-within .submenu 缺一不可。而且每一级的 li 都得支持 :focus-within，否则键盘用户到第三级就断掉了。移动端还要注意的是，别用 @media (hover: none) 直接把 hover 样式删掉，更稳妥的方式是降级为 click 控制：用 data-open="true" 加上 CSS 的属性选择器来驱动显示隐藏，JS 只负责切换属性值，不插手样式逻辑。还有一条要特别注意：初始化隐藏子菜单时，别用 visibility: hidden 或 opacity: 0 来替代 display: none。前者虽然看不见，但依然占据交互区域，鼠标移过去之后容易触发意外的宽度跳动或布局塌缩，得不偿失。

总结：结构对齐，菜单才稳

说到底，纯 CSS 多级联动菜单真正棘手的地方，不在于写出三层选择器，而是让每一级的定位上下文、悬停热区和交互通道都严丝合缝地配合起来。浏览器不会去猜你的意图，它只认结构和规则。把这几块对齐了，菜单自然就稳了。