子菜单展开挤压主导航的根源是一级li未设position:relative，导致子ul无法脱离文档流；应设一级li为relative、子ul为absolute并配opacity/visibility动画；flex布局下二级菜单需显式设display:flex和flex-direction:row。
子菜单展开时挤压主导航？先确认是否用了 position: relative
这是最常见也最容易被忽略的根源：如果一级 li 没设 position: relative，而子 ul 又用 display: block 或 visibility: visible 显式显示，它就会撑开父容器高度，把后续导航项往下顶。
真正起作用的是脱离文档流——不是“让它显示”，而是“让它不占位置”。position: absolute 是唯一可靠手段，但它必须有定位上下文，否则会相对于 body 错位。
- 一级
li必须加position: relative（哪怕只写这一行） - 子
ul设position: absolute+top: 100%（或left: 0，视展开方向） - 子
ul要显隐切换，别用display: none/block配合transition，它会触发重排；改用opacity: 0/1+visibility: hidden/visible，再配transform: translateY(-10px)等做入场动画
flex 布局下二级菜单横向铺开怎么避免换行
一级用 display: flex 没问题，但二级 ul 默认是块级垂直堆叠。想让它横着排成一栏（比如顶部工具栏式二级菜单），不能只靠父级 flex，得单独控制子级。
关键不是“继承 flex”，而是“重置子级流向”。二级 ul 必须显式声明布局方式，否则它还是按默认文档流渲染。
- 给二级
ul加display: flex和flex-direction: row - 加
flex-wrap: nowrap（虽然 row 默认不换行，但显式写上更防误改） - 每个二级
li加flex: 0 0 auto，防止被压缩变形 - 用
gap: 0.5rem控制间距；若需兼容旧浏览器，退回到margin-right，但记得最后一个元素清 margin
为什么加了 position: absolute 还是错位？检查这三处
错位往往不是代码写错，而是定位基准没对齐。绝对定位的 top/left 是相对于最近的已定位祖先，不是一级 li 的视觉边界。
- 一级
li是否真有position: relative？注意：position: static（默认值）不算“已定位” - 一级
li内部是否有padding或border？top: 100%是从 content box 顶部算起，若父有 padding，子菜单会上浮 - 是否意外触发了新的层叠上下文？比如一级
li有transform、opacity 或 <code>filter，会导致子ul的z-index失效，被其他区域盖住
移动端 hover 失效导致菜单打不开？别只靠 CSS
在 iOS 和 Android 上，:hover 不是悬停即触发，而是模拟点击行为：第一次点开菜单，第二次才跳转链接。用户会以为卡住或没反应。
纯 CSS 方案无法解决这个问题，必须介入交互逻辑。
- 给一级
a加tabindex="0"，支持键盘focus触发，兼顾可访问性 - 监听
touchstart事件，用 JS 切换.is-open类控制子菜单显隐，而不是依赖li:hover > ul - 避免在同一个元素上混用
:hover和:focus样式，容易冲突；统一用 class 控制状态更可控
position: relative 和 z-index 同时存在时，只要父级带 transform，子菜单就可能突然消失或偏移几十像素，而且很难一眼看出原因。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
