Flexbox 仅负责布局，不支持多级菜单交互逻辑；展开/收起需 JavaScript 控制状态，CSS 通过 class 切换实现样式过渡，子菜单须脱离 flex 流用 absolute 定位，并兼顾可访问性与响应式处理。
Flexbox 本身不支持多级菜单嵌套的展开/收起逻辑
Flexbox 是布局工具，不是交互控制器。它能帮你对齐、分配空间、控制主轴侧轴方向，但无法处理「点击展开子菜单」「hover 显示下级」「键盘导航焦点管理」这类行为。这些必须靠 JavaScript 驱动，CSS 只负责呈现状态变化后的样式。
常见错误是试图用 display: flex + flex-direction: column 堆叠所有菜单项，然后指望子菜单自动“弹出来”——结果只是被压扁在父容器里，或者溢出不可见。
- 子菜单默认应设为
display: none或height: 0+overflow: hidden - 展开时 JS 切换 class（如
.is-open），CSS 基于该 class 控制display/max-height/opacity - Flexbox 的作用仅限于：让侧栏整体保持垂直流、让菜单项等高对齐、让图标和文字在行内居中
侧栏容器必须设为 flex-direction: column 且高度可控
如果侧栏高度依赖内容自然撑开，子菜单展开后可能撑破视口或触发意外滚动。响应式场景下尤其危险——小屏设备上，未限制高度的 flex 容器会把所有菜单项一股脑挤进屏幕，根本看不到底部。
正确做法是让侧栏自身可滚动，内部菜单项保持弹性分布，子菜单展开时不破坏整体结构：
立即学习“前端免费学习笔记（深入）”；
- 侧栏根元素设
display: flex+flex-direction: column+height: 100vh（或100dvh） - 顶部 logo / 用户区用
flex: 0 0 auto固定尺寸 - 菜单列表区域用
flex: 1 1 0占满剩余空间，并加overflow-y: auto - 避免对菜单项本身设
flex: 1，否则子菜单展开时会压缩其他项高度
.sidebar {
display: flex;
flex-direction: column;
height: 100dvh;
}
.sidebar-header { flex: 0 0 64px; }
.sidebar-nav { flex: 1 1 0; overflow-y: auto; }
子菜单需脱离 flex 流并用定位悬停
直接把子菜单放在父 <li> 内部并设 display: flex，会导致它被父级的 flex-direction: column 强制垂直排列，无法横向展开。更糟的是，Flexbox 的 align-items 会干扰子菜单的 left/right 对齐。
解决方案是让子菜单脱离 flex 布局流：
- 父菜单项设
position: relative - 子菜单设
position: absolute+top: 100%+left: 0（或right: 0实现右对齐） - 子菜单自身用
display: flex或flex-direction: column排列其内部项，但不再受外层 flex 容器约束 - 务必加
min-width: 100%防止子菜单窄于父项
注意：绝对定位元素不会触发父容器重排，所以展开时不会挤压其他菜单项——这正是你需要的。
响应式折叠必须用媒体查询配合 JS 状态切换
纯 CSS 无法监听窗口 resize 后“是否应该收起二级菜单”。你可能会看到有人用 @media (max-width: 768px) 直接隐藏子菜单，但这会带来两个问题：
- 用户在小屏点开一级菜单后，子菜单立即消失（因为媒体查询生效），体验断裂
- 桌面端缩放浏览器宽度到临界值时，已展开的子菜单突然消失，没有过渡
真正可行的方式是：
- JS 监听
resize，判断当前是否进入移动端断点 - 若进入，则遍历所有已展开的子菜单，添加
.is-collapsed-on-mobile类 - CSS 中用
.is-collapsed-on-mobile .submenu { display: none; }控制隐藏 - 同时保留用户手动展开能力（比如小屏下点击仍可展开，只是默认收起）
别忘了给 .submenu 加 transition: opacity 0.2s, max-height 0.2s，但不要对 height 做过渡（flex 容器内 height 过渡不可靠）。
最易被忽略的一点：键盘用户需要 tabindex="-1" 和 aria-expanded 属性同步更新，否则屏幕阅读器无法感知菜单状态变化。
