子菜单飘到页面左上角是因为未给父<li>设position: relative，导致absolute子菜单向上回溯至<body>定位；每级可展开<li>都须显式设relative，避免overflow: hidden裁剪，并采用递进式定位策略解决多层打架问题。
为什么子菜单总是飘到页面左上角？
因为 position: absolute 的定位基准，是最近的「已定位祖先元素」（position 值为 relative、absolute、fixed 或 sticky），不是直接父元素。如果父 <li> 没设 position: relative，它就往上找——常落到 <body> 上，于是子菜单贴着视口左上角显示。
实操建议：
- 每一级可展开的
<li>（即包含.sub-menu的项）都必须显式加position: relative - 不要只给最外层
<ul class="nav-list">加，嵌套越深，漏设一级就越容易出错 - 避免在父
<li>上误加overflow: hidden—— 它会裁剪掉absolute子元素，让菜单“凭空消失”
怎么让二级、三级、四级菜单各自定位不打架？
关键在「递进式定位策略」：第一级子菜单用 position: absolute 贴父链接下方；更深层级（≥第二级）改用 position: relative + margin-left（或 margin-right，适配 RTL）实现缩进和视觉归属，而不是继续套 absolute。
这样做的好处是：
立即学习“前端免费学习笔记（深入）”；
- 避免多层
absolute叠加导致的z-index层叠上下文隔离问题（比如二级设了transform，三级就盖不住它） - 深层菜单随父容器自然位移，不依赖固定坐标，响应式更稳
- 无需为每层写新选择器，靠
.sub-menu .sub-menu这类后代选择器就能统一控制
hover 展开时菜单闪退，怎么让鼠标移过去不中断？
闪退主因是鼠标从父项移到子菜单途中经过了空白间隙，触发了 :hover 离开状态。这不是 CSS 写错，而是布局没兜住。
实操要点：
- 确保子菜单
top: 100%且margin: 0，与父项下边缘严丝合缝，不留白 - 父
<li>设position: relative，子菜单用left: 0对齐，防止偏移后悬空 - 加一层「连接桥」选择器：
.nav-list > li:hover > .sub-menu, .sub-menu:hover，但注意这会让键盘焦点逻辑变复杂，慎用于可访问性要求高的场景
移动端点击展开后，其他菜单不自动收起？
CSS 本身没有互斥逻辑。:hover 和 :focus-within 在触屏上不可靠，且无法感知“点击新项时关闭旧项”。纯 CSS 方案在这里必然失效。
必须引入轻量 JS 控制状态：
- 给所有可展开项（如带
data-toggle="dropdown"的<a>或<li>）绑定click事件 - 点击时先遍历关闭所有同级兄弟的
.sub-menu（或.nested-menu），再切换当前项 - 用
e.stopPropagation()阻止事件冒泡，否则点第三级时会连带触发第二级关闭 - 配合
aria-expanded同步更新，保证屏幕阅读器能识别状态
真正容易被忽略的是：多级嵌套中，「定位基准」和「层叠上下文」是两套独立机制，改一个不一定修另一个；而移动端的交互断点（比如 pointer: coarse）必须早于样式加载就介入判断，晚了就来不及切逻辑。
