子菜单定位必须基于带position: relative的直接父li；top: 100% + width: 100%实现自适应，需父级box-sizing: border-box；禁用display: none，改用visibility: hidden等组合保障可访问性；消除悬空间隙比加transition-delay更关键。
父容器必须加 position: relative
子菜单用 position: absolute 时，它只会找最近一个带 position: relative、absolute、fixed 或 sticky 的祖先。漏掉这步，菜单就直接贴到 body 左上角去了。
常见错误是只给整个导航栏（比如 .nav）加 position: relative，结果所有子菜单都以导航栏左上角为定位原点；正确做法是给每个可展开项（如 .nav-item 或 li）单独加。
- 用开发者工具检查该
li的offsetParent，确认是不是你预期的那个父级 - 别在
html或body上误加position: relative，否则全站定位基准被污染 - 如果导航用 Flexbox 布局，
position: relative可直接加在li或a上，不影响 flex 行为
top: 100% + width: 100% 是自适应宽度的核心组合
top: 100% 让下拉菜单紧贴触发项底部，不依赖字体大小、行高或内边距——换字号、缩放页面、切系统设置都不崩。写死 top: 40px 这类值，一动就错位。
width: 100% 要生效，前提是父级已设 box-sizing: border-box。否则 padding/border 会额外加宽，导致菜单溢出或错位。
- 所有参与定位的父级（尤其是
.nav-item）都应统一加box-sizing: border-box - 别把
padding写在.nav-item上，改到内部a标签里，避免干扰定位起点 - 若触发按钮宽度不固定（比如文字长度变化），
width: 100%才真正“自适应”；若父级写了固定width，子菜单只能继承那个死值
移动端必须降级，不能靠 :hover 硬撑
@media (hover: none) 或 (pointer: coarse) 下，:hover 规则自动失效。这时候再调 transition-delay 或强行加 opacity 动画都没用——CSS 没法模拟点击状态切换。
真正可行的路径只有两条：:focus-within（键盘用户）或 JS 控制的 [data-open="true"]（触摸用户）。
- 每一级可展开项都要有
class="has-submenu"，且子<ul class="submenu"></ul>必须是其直接子元素 - 禁用
display: none，改用visibility: hidden+opacity: 0+pointer-events: none，保证屏幕阅读器可读、链接可聚焦 -
:hover和:focus-within必须同时写，且每级都要加position: relative，否则键盘用户 Tab 进去菜单根本不显示
消除悬空间隙比加延迟更关键
鼠标移入子菜单时闪退，根本原因不是动画慢，而是父项和子菜单之间存在哪怕 1px 的垂直/水平间隙，导致 :hover 状态中断。
transition-delay 不延长伪类状态，只推迟过渡起始时间——它根本没机会执行。
- 给父级
li加负margin-bottom: -1px，把子菜单的top: 100%区域物理覆盖进去 - 二级菜单用
top: 100%+left: 0；三级起统一用left: 100%+top: 0，对齐上一级项的左侧边框 - 禁用父容器（如
nav、.menu）的overflow: hidden，否则子菜单会被裁切，看似“消失”实为被截断
最易被忽略的一点：所有子菜单的 position: absolute 必须基于带 position: relative 的父 li，而不是外层 ul 或 nav。一旦定位上下文错位，top/left 值就全乱了，再调任何动画参数也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
