子菜单向右偏移主因是浏览器对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 是否被显式归零——漏掉任意一个，对齐就不可控。
