ul/li嵌套+checkbox是纯CSS多级折叠导航最可靠方案，不依赖JS、可记忆状态、兼容触摸设备；结构需严格满足input与label紧邻、submenu紧跟label，CSS用:checked~.submenu控制显隐，缩进用padding-left+border-left保障可访问性，移动端必须强制收起子菜单并处理z-index层级。
用 ul/li 嵌套 + checkbox 控制显隐最可靠
纯 CSS 实现多级折叠侧边导航，ul/li 嵌套配合隐藏 <input type="checkbox"> 是当前最稳妥的方案。它不依赖 JS，能记住展开状态，且在触摸设备上正常工作——而 :hover 在手机上会失效，且无法持久化状态。
关键结构必须满足：每级子菜单是一个独立的 <ul class="submenu">，直接嵌在父 <li> 内；控制它的 <input> 和触发 <label> 必须紧邻，中间不能插其他元素，否则 ~ 兄弟选择器会失效。
-
<input type="checkbox" id="menu-1">放最前，<label for="menu-1">设置</label>紧跟其后 -
<ul class="submenu">必须紧跟<label>，不能隔<div>或换行符（HTML 中空白符会被解析为文本节点，破坏兄弟关系） - CSS 中用
input[type="checkbox"]:checked ~ .submenu { display: block; }，不用visibility或opacity，否则仍占布局空间或焦点不可达
层级缩进别用 margin-left 或绝对定位
视觉层级靠 padding-left + border-left 实现，不是为了“好看”，而是为了可访问性和焦点逻辑正确。用 margin-left 会导致 tab 键聚焦框错位；用 position: absolute 会让屏幕阅读器跳过子菜单或朗读顺序混乱。
推荐缩进值（累加式，清晰反映嵌套深度）：
立即学习“前端免费学习笔记（深入）”；
- 一级菜单：
padding-left: 1rem，border-left: 2px solid #e0e0e0 - 二级菜单：
padding-left: 2.5rem，border-left: 2px solid #c5c5c5 - 三级菜单：
padding-left: 4rem，border-left: 2px solid #aaa
所有层级共用同一套 class 名（如 submenu），靠父级深度用 CSS 选择器区分样式，避免写 .submenu-level-2 这类冗余 class。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
移动端必须用 @media 强制收起所有子菜单
小屏下若允许多级同时展开，会严重挤压主内容区，甚至导致横向滚动。这不是“体验优化”，而是必要约束。
在 @media (max-width: 768px) 中必须重置所有子菜单状态：
- 把所有
.submenu设为display: none !important（加!important防止被 :checked 规则覆盖） - 隐藏所有
input[type="checkbox"]的对应label（或仅保留一级 label 可见） - 确保一级菜单项仍有足够点击热区（最小 44×44px），避免触摸误操作
别试图在移动端“保留部分展开状态”——用户手势意图不明确，自动展开反而干扰导航流。
z-index 和事件冒泡是隐藏雷区
子菜单默认会渲染在同级 <li> 下方，但若父级有 overflow: hidden 或 transform，子菜单可能被裁剪或错位。更隐蔽的问题是 z-index：当多个 .submenu 并列时，后出现的会盖住前面的，但它们又共享同一父容器，无法靠自然文档流排序。
解决方案很具体：
- 给每个
.submenu加position: relative和显式z-index，值按嵌套深度递增（如一级 10，二级 20，三级 30） - 所有可点击的
<label>必须加pointer-events: auto（防止父级pointer-events: none意外拦截） - 避免在
<label>内再套<span>或<i>后手动绑定 click，这会引发事件冒泡到父 checkbox，造成重复触发
真正难调的从来不是“怎么让菜单动起来”，而是当三级菜单弹出后，鼠标移过去却点不中第二项——那八成是 z-index 没对齐，或者某层父容器悄悄加了 will-change: transform。
