flex-wrap: wrap 不能自动折叠菜单，需配合 flex-shrink: 0 和 min-width：因默认 flex-shrink: 1 导致菜单项被压缩变形，加 flex-shrink: 0（或 flex: 0 0 auto）并设 min-width 才能触发可靠换行。
flex-wrap: wrap 不能自动折叠菜单？得配 flex-shrink 和 min-width
小屏下菜单项挤成一团或横向滚动，不是 flex-wrap: wrap 没生效，而是子项被 Flexbox 默认压缩了。flex-shrink: 1（默认值）会让所有 li 主动缩小，哪怕内容撑不开，结果箭头被压扁、文字换行错乱。
- 给每个菜单项加
flex-shrink: 0，阻止它被压扁 - 用
flex: 0 0 auto替代模糊的flex: 1，明确“不伸展、不收缩、按内容宽” - 设
min-width: 120px（或根据文字长度调整），让项宽达到阈值才触发换行 - 别依赖
justify-content: space-between在换行后对齐——它只作用于当前行，多行时每行独立计算，视觉上会松散
多级下拉菜单定位总偏移？别用 absolute 套 absolute
二级菜单贴不紧一级项右侧、三级菜单悬空、移动端错位……根本问题出在嵌套 position: absolute 的累积偏移和父容器 position: relative 缺失。
- 只在直接包含子菜单的
li上设position: relative，其他层级不加 - 子菜单统一用
position: absolute; top: 100%; left: 0;，避免写right: 0（受父容器 padding 影响） - 如果要右对齐（比如「设置 ▸」展开向右），改用
left: 100%+top: 0，并确保父li有足够内边距留出空间 - 绝对定位元素必须显式设
width或min-width，否则宽度由内容撑开，小屏下易溢出
无限嵌套菜单不用写 .sub-menu-2、.sub-menu-3？靠后代选择器穿透
为每层写单独类名不仅冗余，还会让 JS 切换状态时逻辑爆炸。真正可扩展的做法是：HTML 保持结构一致，CSS 只靠一层规则驱动所有层级。
- 所有子菜单统一用
.sub-menu类，HTML 中嵌套层级不限 - 关键样式只写两处：
.nav-list > li > .sub-menu控制第一级定位，.sub-menu .sub-menu控制后续层级缩进与方向 - 例如二级菜单右偏移：
.sub-menu .sub-menu { left: 100%; top: -0.25rem; }，无需新增选择器 - 配合
:hover或.active类控制显示，但注意移动端需用 JS 触发，纯 CSS:hover在触摸设备上无效
箭头旋转动画卡顿或转歪？transform 是状态，不是增量
点击一次变 ▼，再点还是 ▼，或者转一半停住——这不是浏览器 bug，是你没重置 transform 值。
- 用两个明确 class：
.arrow-collapsed { transform: rotate(0deg); }和.arrow-expanded { transform: rotate(90deg); } - 把
transition: transform 0.2s ease写在箭头元素本身，别写在父容器上 - 加
transform-origin: center，尤其当箭头是 inline 元素或字体图标时，否则绕左上角转 - 避免同时给
transform和width/height加 transition，重绘压力大，低端安卓 WebView 明显掉帧
position: relative 或漏写的 min-width，就能让整棵树偏移。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
