用 position: relative 包裹下拉容器是因为 absolute 定位的子菜单需相对于最近的 relative/absolute/fixed 祖先定位，否则会脱离导航栏飘至视口左上角；ul.nav > li 必须显式设 relative，Flex 布局不自动创建定位上下文。
为什么用 position: relative 包裹下拉容器
因为 position: absolute 的子菜单必须相对于最近的 position: relative（或 absolute/fixed）祖先定位，否则会脱出导航栏、飘到页面左上角。常见错误是直接给 .submenu 加 absolute，但父级 li 没设 relative，结果二级菜单飞走。
实操建议：
-
ul.nav > li必须加position: relative - 不要依赖
body或html作为定位上下文——它们没设relative，浏览器会回退到初始包含块（通常是视口左上） - 如果用 Flex 布局写导航栏，
display: flex不会自动创建定位上下文，仍需显式加relative
二级菜单显示/隐藏靠什么触发
纯 CSS 实现靠 :hover + 子选择器，但注意：移动端不支持 :hover 持久态，且多级菜单在触屏设备上需要点击展开，CSS 无法可靠模拟“点击切换”。所以「纯 CSS 多级下拉」实际只适合桌面端。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 鼠标移向二级菜单时，它一闪而过——因为一级
li:hover和二级.submenu之间有空隙，hover状态中断 - 三级菜单无法触发——
ul.submenu > li:hover .submenu写错层级，或没给中间li加relative
解决关键：用 top: 100% 让二级菜单紧贴一级项底部，再加 margin-top: -1px 或 padding-bottom: 2px 消除悬停断点。
z-index 在多级菜单里到底要不要设
要，但只在必要位置设。很多人以为“全加上 z-index: 999 就安全”，结果反而引发层叠问题：比如二级菜单盖不住弹窗，或三级菜单被隔壁组件遮住。
实操建议：
- 一级导航容器（如
.nav）设z-index: 100 - 每个下拉菜单统一设
z-index: 101（不必逐级递增），因为它们都相对同一父级定位，同级堆叠顺序由 DOM 顺序决定 - 避免对
body或html设z-index——这会创建新的层叠上下文，导致子元素z-index失效
响应式断点里怎么处理下拉逻辑
小屏幕不该强行保留 hover 下拉，而应改用点击展开（需 JS）。CSS 媒体查询只能控制“是否显示”，不能切换交互方式。
所以响应式方案本质是两套：
- 桌面端：
@media (min-width: 768px)内保留:hover+absolute下拉 - 移动端：
@media (max-width: 767px)中把.submenu设为display: none，同时用 JS 绑定click切换.is-open类来控制显隐 - 别试图用
hover+focus-within模拟点击——iOS Safari 对focus-within支持不稳定，且键盘用户路径混乱
最易被忽略的一点：触摸设备上，click 事件有约 300ms 延迟，如果菜单展开靠原生 click，用户会感觉卡顿。真要兼顾体验，得用 touchstart 或现代方案如 pointerdown。
