多级菜单定位失效主因是父容器漏设position: relative或子菜单padding-left未清零；absolute元素无定位祖先时默认相对html定位，故飘至左上角；须逐级为li设relative、重置ul padding-left为0、用top: 100%和left: 100%实现精准贴边展开。
多级菜单定位失效，八成不是 top 或 left 值写错了，而是某一级父容器漏了 position: relative，或者子菜单的默认 padding-left 没清零。
为什么子菜单总飘到左上角？
因为 position: absolute 的元素会向上查找最近一个 position 值为 relative、absolute 或 fixed 的祖先——如果没找到，就直接相对于 定位。这不是 bug，是规范行为。
- 必须给每一级菜单项（比如
<li class="menu-item">）显式加position: relative - 别只在最外层
<nav></nav>或<ul></ul>上设relative，那会让所有子菜单都以它为基准，层级一深就偏移叠加 - 如果父容器是
display: flex或grid，加relative不影响布局，放心用
二级菜单怎么紧贴一级底部展开？
用 top: 100% 是最稳的方式，它表示“从父容器内容区底边开始计算”，比写死 top: 42px 更可靠——字体缩放、行高变化、padding 调整都不影响对齐。
- 子菜单（如
.submenu）设position: absolute; top: 100%; left: 0; - 确保父
<li>没有意外的margin-bottom或padding-bottom，否则top: 100%会从 padding 区起算 - 如果一级菜单有圆角或 border，子菜单边缘可能露白；优先检查
box-sizing: border-box是否生效，再考虑用margin-top: -1px微调
三级菜单向右弹出但位置飘了？
关键不在 left: 100% 本身，而在它依赖的“父级宽度”是否为 0 —— 如果二级菜单项（<li>）没设 position: relative，那么它的子菜单就会向上找，left: 100% 就算错基准。
- 二级菜单的每个
<li>必须加position: relative，这是三级菜单的定位锚点 - 三级菜单用
position: absolute; left: 100%; top: 0;，才能真正从二级项右侧出发 - 二级菜单本身要有明确宽度：用
min-width: 200px+white-space: nowrap防止内容换行导致宽度塌缩，否则left: 100%会按 0 计算
hover 移动时菜单突然收起？
这不是 CSS 动画延迟能解决的问题，而是 DOM 结构中存在视觉不可见的间隙，鼠标划过时脱离了 :hover 区域。
- 典型结构破绽：
<li>和其子<ul></ul>之间有垂直空隙（哪怕只有 1px） - 稳妥解法：把子菜单作为
<li>的直接子元素，并让整个<li>触发 hover（即用li:hover > ul），同时给该<li>加padding-bottom: 30px扩展热区 - 避免用
transition-delay掩盖问题——延时不能补上物理间隙，反而会让交互变钝
最容易被忽略的其实是子菜单的 padding-left：浏览器对 <ul></ul> 默认设了 40px，嵌套时继承下来，视觉上就整体右偏了一截；这个值必须每级都显式重置为 0，和 position: relative 一样，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
