子菜单定位错乱需为.menu-item设position: relative；一级项宽度不均时应动态计算中心点；.submenu必须显式设display: flex；纵向用flex-direction: column；展开动画用max-height+overflow: hidden；:checked~.submenu失效因dom结构非同级兄弟。
子菜单不显示或定位错乱，先检查 .menu-item 是否设了 position: relative
Flex 布局本身不提供定位上下文，.submenu 用 position: absolute 时，若父级 .menu-item 没设 position: relative，它会一路向上找最近的已定位祖先——大概率落到 上，结果所有子菜单都堆在左上角或随滚动偏移。
必须给每个带下拉的 .menu-item 显式加 position: relative。这不是可选项，是定位生效的前提。
- 漏写这行，
top: 100%、left: 50%全部失效 - 一级项宽度不均（如“首页” vs “关于我们”）时，硬写
left: 0会导致对不齐 - 如果一级项本身是
flex: 1或内容动态变化，纯 CSS 居中可能漂移，此时需 JS 调用getBoundingClientRect()动态算中心点
.submenu 必须显式声明 display: flex，不能靠继承
Flex 的作用域只限直接子元素。.submenu 是 .menu-item 的子元素，而 .menu-item 即使是父 <nav></nav> 的 flex item，它自身仍是普通块级容器——内部的 .submenu 不会自动获得 flex 行为。
常见错误现象：二级菜单内按钮挤成一团、文字换行错乱、min-width: max-content 不生效，八成是因为漏了这行：
.submenu {
display: flex;
}
- 纵向列表用
flex-direction: column - 横向按钮组（如“编辑|删除|分享”）优先用
flex-direction: row+flex-wrap: wrap - 别给
.submenu设flex-shrink: 1，否则会被父级压缩塌陷；推荐设flex: none或flex: 0 0 auto
用 max-height + overflow: hidden 实现展开动画，别碰 flex-basis
flex-basis 不支持 transition，写 transition: flex-basis 0.3s 浏览器直接忽略。想让子菜单有高度过渡效果，唯一可靠路径是 max-height。
关键点：
-
max-height初始值设0，展开时设一个明显大于内容实际高度的固定值（如300px或500px） - 必须配
overflow: hidden，否则超出部分仍可见 -
height: auto无法过渡，浏览器不知道 auto 等于多少像素 - 子菜单内若含图片、异步文本或动态组件，预估的
max-height可能不够，得用 JS 读scrollHeight动态设置
:checked ~ .submenu 不生效？检查 DOM 结构是否满足“同级兄弟”关系
CSS 的 ~ 选择器只匹配**后续兄弟元素**，不是后代，也不是任意同名元素。最常见失效原因是结构没对齐：
-
<input>和<ul class="submenu"></ul>必须是同一父元素的**直接子节点** - 错误结构：
<label><input></label><ul class="submenu"></ul>→input和ul不是兄弟 - 正确结构：
<input id="node1"><ul class="submenu"></ul>（中间不能插其他元素） - 多级菜单必须每级独立绑定唯一 ID 的
input，不能复用父级 ID，否则联动会失控
真正难的不是让菜单动起来，而是当子菜单里混着图标、徽标、文字换行、甚至动态插入的 React 组件时，max-height 的终点值和 flex 的尺寸收敛经常互相打架——这时候得靠 box-sizing: border-box 和 min-height: 0 来兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
