子菜单容器必须显式设display: flex，不能依赖父级继承；因flex作用域仅限直接子元素，.submenu作为.menu-item的子元素，需手动声明display: flex才能启用justify-content、flex-wrap等属性。
子菜单容器必须显式设 display: flex，不能依赖父级继承
很多人给一级菜单加了 display: flex，就以为二级菜单自动进入 Flex 上下文——其实不会。Flex 的作用域只限直接子元素，.submenu 是 .menu-item 的子元素，而 .menu-item 本身只是个普通块级容器（哪怕它在父级里是 flex item），它内部的 .submenu 不会自动获得 flex 行为。
必须手动给 .submenu 加 display: flex，否则 justify-content、flex-wrap 等属性全无效。常见错误现象：二级菜单内按钮挤成一团、文字换行错乱、min-width: max-content 不生效——八成是因为漏写了这行。
-
.submenu { display: flex; }是硬性前提，缺一不可 - 若二级菜单是纵向列表，加
flex-direction: column - 若是横向按钮组（如“编辑｜删除｜分享”），优先用
flex-direction: row+flex-wrap: wrap
父级 .menu-item 必须设 position: relative
这是子菜单能准确定位的底层前提。没有它，.submenu 上的 position: absolute 会向上逐层查找最近的已定位祖先，最终相对 body 定位——结果就是所有子菜单都堆在页面左上角，或随窗口滚动偏移。
尤其当一级菜单项宽度不均（比如“首页” vs “关于我们”）时，靠 left: 0 或 right: 0 硬对齐必然错位。正确做法是结合定位与 transform：
- 每个带下拉的
.menu-item都要加position: relative -
.submenu设position: absolute; top: 100%; left: 50%; transform: translateX(-50%) - 如果一级项用了
flex: 1或内容动态变化，纯 CSS 居中可能失效，此时需 JS 调用getBoundingClientRect()动态算中心点
z-index 生效前必须先加 position
二级菜单常被隔壁导航栏、侧边栏盖住，不是 z-index: 9999 不够大，而是 .submenu 自身没设 position，导致 z-index 完全被忽略。浏览器计算后发现它的 position 还是 static，直接无视该值。
要让层级控制起作用，得满足两个条件：
-
.submenu必须有position: absolute（或relative/fixed） - 确保它和遮挡它的兄弟容器不在同一个层叠上下文中；如果遮挡来自某个祖先元素（比如
.header设了opacity: 0.99或will-change: transform），那再调z-index也没用 - 同级多个下拉菜单之间比大小，
z-index数值大的覆盖小的，HTML 顺序只是兜底规则
避免 flex-shrink: 1 压缩子菜单宽度
子菜单塌陷、文字强制换行、按钮被压扁——根本原因常是父级 .menu-item 作为 flex item，默认启用了 flex-shrink: 1，而 .submenu 又没设明确宽高，于是被无情压缩。
别急着给 .menu-item 加 flex-shrink: 0（这会让一级菜单失去弹性布局优势），而是把尺寸控制权交给子菜单本身：
-
.submenu显式设min-width: max-content（比width: 100%更可靠，避开 padding 影响） - 内部文字用
white-space: nowrap防止意外折行 - 若需换行，配合
flex-wrap: wrap和width: fit-content，而不是放任它撑满父容器 - 注意：hover 触发时菜单闪退，大概率是一级项和子菜单间存在 1px 间隙，用
top: 100%+margin-top: -1px微调可解决
position: relative 必须落在每个具体触发项上」，而不是只加在 .nav-list 或 .dropdown 这类包裹容器上——后者会导致所有子菜单共享一个定位原点，一旦菜单项位置变动，对齐立刻失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
