根本原因是容器层级错误和语义结构断裂：侧边栏需设flex垂直布局，.nav-dropdown保持块级上下文，子菜单用绝对定位或显隐控制；checkbox必须前置label且无空格，移动端按钮须满足44px触控区并保留DOM焦点流。
侧边折叠导航里按钮排布错乱、缩进不齐、点击区域失效——根本原因不是 CSS 写得不够多，而是按钮没被放在正确的容器层级里，且未配合折叠状态做显隐与布局隔离。
为什么 display: flex 在折叠导航里直接套在 .nav-dropdown 上会失效
常见错误是给每个菜单项（如“Memories”“About Us”）单独加 display: flex，结果子菜单 .dropdown-menu 被强行拉平、折叠按钮失去控制权。真正该设为 flex 的是整个侧边栏容器（比如 .sidebar），而每个 .nav-dropdown 必须是独立的块级上下文。
-
.sidebar设display: flex; flex-direction: column;，保证所有一级项垂直堆叠 - 每个
.nav-dropdown用display: block;（别动它），内部靠position: relative+padding-left控制缩进层级 - 子菜单
.dropdown-menu必须用position: absolute或display: none/block显隐，不能参与父级 flex 流，否则折叠/展开时会撑开高度或错位
button 和 label 混用时的排列断裂问题
用 checkbox + label 实现纯 CSS 折叠时，button 和 label 若混在同一级结构里，会导致点击区域错位、键盘 Tab 焦点跳过子菜单、屏幕阅读器无法关联状态。这不是样式问题，是语义断裂。
- 一级菜单项统一用
label（带for属性），不要夹杂button；二级及以下才用button触发 JS 行为 - 所有
input[type="checkbox"]必须放在对应label前面，且中间无换行符或空格，否则:checked ~ .submenu选择器失效 - 若必须用
button（比如需要 JS 监听 click），就放弃纯 CSS 折叠，改用aria-expanded+aria-controls手动控制显隐和焦点流
移动端折叠后按钮横向溢出或热区过小
iOS 和 Android 小屏下，按钮文字被截断、点击无响应，往往是因为用了 white-space: nowrap 或固定 width，而没预留触控安全区。
立即学习“前端免费学习笔记（深入）”；
- 所有导航按钮必须设最小尺寸：
min-height: 44px; min-width: 44px;（iOS 人机指南硬性要求） - 文字换行用
white-space: normal;+word-break: break-word;，别强撑单行 - 折叠状态下，隐藏的子菜单仍要保留在 DOM 中（别用
display: none），否则键盘 Tab 会跳过整段逻辑；改用visibility: hidden; position: absolute; clip-path: inset(100%);
最易被忽略的是焦点管理：折叠菜单收起时，焦点不该卡在已不可见的 button 上，而应自动前移到上一个可聚焦元素，或落到主内容区首个 h1 —— 这部分没有 CSS 能解决，必须用 JS 监听 transitionend 后手动 focus()。
