CSS如何实现多级下拉菜单精准对齐_利用Relative父级与Absolute子级

子菜单向右偏移主因是浏览器对ul默认设padding-left:40px，需显式重置为0；且每级li必须设position:relative作为定位基准，否则left:100%等计算失准。

多级下拉菜单对不齐，90%不是定位写错了，而是父级没设 position: relative 或子菜单的 padding-left 没重置。

为什么子菜单总是向右偏移一截？

浏览器对 ul 元素有默认 padding-left: 40px（各浏览器略有差异），嵌套的子 ul 会继承这个内边距，导致整个菜单块左边缘被撑开。

• 别只盯着 left: 0 —— 它对齐的是父 li 的 content box，但子 ul 自身有 40px 左内边距，视觉上就右移了
• 解决方案很简单：给所有下拉级 ul 显式加 padding-left: 0
• 顺手把 margin: 0 也加上，避免某些 UA 样式干扰

三级菜单贴着二级右侧弹出，但位置飘了

关键在两级定位参照必须独立：二级菜单要相对于一级 li 定位，三级则必须相对于二级 li 定位——否则 left: 100% 会算错基准。

• 一级 li 必须有 position: relative
• 二级 ul 设 position: absolute; top: 100%; left: 0，且其直接父 li 也要 position: relative
• 三级 ul 的 left: 100% 才能正确贴二级 li 右侧；如果二级 ul 的父 li 缺少 position: relative，它就会向上找最近的相对定位祖先，结果偏移

菜单宽度塌缩或撑破父项

width: 100% 是陷阱，min-width: 100% 才是稳解。

立即学习“前端免费学习笔记（深入）”；

• width: 100% 会继承父容器的 padding 和 border，实际宽度 = 父内容宽 + 父左右 padding，常导致横向溢出
• 用 min-width: 100% 保证至少和父项一样宽，再配合 white-space: nowrap 防长文本折行撑高
• 如果父 li 有 text-align: center，子菜单文字也会居中，需单独重置为 text-align: left

IE11 / 旧 Edge 下 hover 延迟或失效

纯 CSS 方案在老浏览器里 hover 不稳定，尤其动态插入或深度嵌套时。

• 不要只依赖 :hover，给一级触发元素同时加 :focus-within（支持到 IE11）
• 例如：.first-level-menu > li:hover > .second-level-menu, .first-level-menu > li:focus-within > .second-level-menu
• 注意：键盘用户 tab 进入子菜单项时，:focus-within 才会生效，这对可访问性也是刚需

真正难的不是写出三级显示逻辑，而是每一级的 position: relative 是否都落在正确的 li 上，以及每个 ul 的 padding 是否被显式归零——漏掉任意一个，对齐就不可控。