纯CSS树形菜单必须用:checked+~兄弟选择器实现，因:hover会导致悬停中断无法点击子项且移动端失效；需隐藏checkbox控制同级submenu显隐，用max-height过渡动画并确保HTML节点顺序正确。
纯 CSS 实现树形菜单可行，但必须用 :checked + 兄弟选择器（~ 或 +），不能靠 :hover 做多级持久展开，也不能用 display 做过渡动画。
为什么 :hover 不适合多级树形菜单
鼠标移入时展开、移出即收起，会导致用户无法点击子项——只要光标稍一偏移，.submenu 就消失。尤其在多层嵌套时，悬停路径极难稳定维持。:hover 仅适合单层下拉导航，不是树形菜单的可靠交互基础。
常见错误现象：.menu-item:hover .submenu { display: block; } 写出来看似能展开，但实际操作中几乎无法完成二级项点击。
- 子菜单必须紧贴触发元素（如
<label></label>）下方，否则悬停中断 - 没有状态记忆：刷新或失焦后所有层级重置为收起
- 移动端无
:hover，直接失效
:checked + ~ 是唯一稳定方案
核心逻辑是：每个可折叠节点配一个隐藏 <input type="checkbox">，用其 :checked 状态驱动后续兄弟元素显隐。CSS 无法“穿透”父级影响后代，所以 .submenu 必须和 <input> 同级且在其后。
立即学习“前端免费学习笔记（深入）”；
正确结构示例：
<input type="checkbox" id="node-1"> <label for="node-1">文档</label> <ul class="submenu"> <li><a href="#">入门</a></li> <li><a href="#">进阶</a></li> </ul>
-
<input>和<ul class="submenu"></ul>必须同属一个父容器（如外层<ul></ul>） - 推荐统一用
~（后续兄弟）而非+（相邻兄弟）：HTML 中的换行/空格文本节点会破坏+匹配，但~仍有效 - 每级折叠都需独立
<input>，id 必须唯一；父级checked状态不会自动传递给子级
动画必须用 max-height + overflow: hidden
直接切 display: none ↔ block 没有过渡效果，且内容会瞬间闪现；height: auto 不参与 transition，设固定 height 又不适应动态内容高度。
正确写法：
.submenu {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
}
input:checked ~ .submenu {
max-height: 300px; /* 需略大于实际最大高度，否则动画中途被截断 */
}- 漏掉
overflow: hidden是高频翻车点：过渡过程中内容会直接撑出来，像被弹出一样 -
max-height值不能写死太小（如100px），否则长菜单展开到一半就卡住 - 不要用
height过渡：子菜单项数量不确定时，无法预设安全值
容易被忽略的 DOM 结构细节
最常被忽略的是「物理顺序」——不是视觉位置，而是 HTML 树中的节点顺序。哪怕 CSS 用 flex 或 grid 把 <label></label> 和 <ul></ul> 排成一行，只要它们在 HTML 中不是同级兄弟，:checked ~ .submenu 就完全不生效。
-
<ul class="submenu"></ul>不能包在<label></label>里，那是后代关系，不是兄弟 - 不能把
<input>放在<label></label>之后再放<ul></ul>：顺序错，选择器失效 - 多级嵌套时，第二层的
<input id="node-1-2">必须紧跟在它自己的<label></label>后面，且与它的.submenu同级
DOM 层级一旦写错，整个折叠逻辑就静默失败，浏览器控制台也不会报错——这是调试时最耗时间的点。
