根本原因是父级li未设置position: relative，导致绝对定位的ul找不到定位参照而脱离触发项；必须为每级li显式添加position: relative，且不可依赖flex等布局自动提供定位上下文。
为什么 li:hover > ul 一展开就偏移？
根本不是 hover 写错了，而是父级 <li> 没设 position: relative。绝对定位的子 <ul></ul> 会去找最近的已定位祖先；如果没找到，就往上一直找到 ，结果就是菜单从页面左上角弹出，跟触发项完全脱节。
常见错误写法：.nav li ul { position: absolute; top: 100%; left: 0; } —— 缺少对父 li 的定位声明，top: 100% 就失去参照系。
- 必须补上：
.nav li { position: relative; } - 若父
li已有display: flex或其他布局，仍需显式加position: relative，它不干扰 flex 行为 - 避免在父
li上同时用top/left百分比值——这会让它的“定位起点”漂移，间接影响子菜单锚点
position: absolute 下拉菜单总往右飘怎么办？
典型现象：菜单宽度固定（如 width: 200px），但触发项本身宽度不一，left: 0 导致右侧溢出或左侧留白。这不是浏览器 bug，是定位逻辑被误读。
left: 0 意味着“贴父容器左边缘”，而多数导航项是居中或右对齐的，所以菜单自然错位。
- 优先用
left: 50%; transform: translateX(-50%);实现水平居中（前提是父li宽度明确或由内容撑开） - 若父项宽度动态（如文字长度不一），改用
right: 0+left: auto，再配合text-align: right在父容器上，让菜单右边界对齐触发项右边界 - 禁用
margin-left: auto类样式在父li上——它会干扰position: relative的盒模型计算
响应式下拉菜单在小屏上错位怎么修？
媒体查询里只改 font-size 或 padding，却忘了重置下拉菜单的 top 和 left，是最隐蔽的错位来源。尤其当父 li 高度因行高变化而收缩时，top: 100% 会把菜单卡在半空。
- 小屏下统一改用
top: calc(100% + 4px)替代top: 100%，加一点间隙防粘连 - 移除所有硬编码的
transform: translateX(-138px)类规则——像素值在缩放后必然失效 - 检查父容器是否意外设置了
overflow: hidden：它会直接裁掉超出部分，让菜单“消失”，看起来像没展开
嵌套二级菜单总是向右偏移越来越远？
一级菜单设了 left: 100%（右对齐父项），二级又照抄，结果就是“父项右边缘 → 子菜单左边缘 → 子菜单右边缘 → 孙菜单左边缘”，逐级右漂。
这不是层级越深越难控，而是定位基准没统一。
- 一级菜单：
left: 0; top: 100%;（贴父项底部左对齐） - 二级菜单：
top: 0; left: 100%;（贴一级菜单左边缘，向右展开） - 三级及以上：全部复用二级逻辑，
left: 100%是唯一可靠方案，不要尝试right: 0反向推导 - 所有嵌套
<ul></ul>必须是父<li>的直接子元素，DOM 断裂会导致 CSS 选择器li:hover > ul失效，菜单压根不出现
真正容易被忽略的是：position: relative 必须加在每一级的 <li> 上，而不是只加在最外层导航容器。漏掉任意一级，后续所有子菜单的定位上下文就断了——它不会报错，只会静默错位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
