label 标签不能实现多级联动菜单，其语义仅为绑定表单控件，不支持层级展开等交互；纯 CSS 方案需依赖 checkbox + label 配合兄弟选择器，但三级以上不可靠且存在兼容性与体验缺陷；真实项目应放弃纯 label 执念，用 button 或 role="button" 元素配合最小 JS 实现可访问的菜单交互。
label 标签本身不能实现多级联动菜单
label 的语义是「绑定表单控件」，它不响应层级展开、点击收起、父子联动等交互逻辑。强行用 label 做菜单，要么依赖 CSS 隐藏/显示 hack（如 :checked + .submenu），要么必须配合 input[type="checkbox"] 或 input[type="radio"] 才能触发状态切换——但这时真正起作用的是表单元素，label 只是它的“点击代理”。
用 checkbox + label 实现纯 CSS 二级菜单（无 JS）
这是最接近“只用 label”的可行方案，本质是利用表单控件的 checked 状态驱动 CSS 选择器。
- 每个子菜单前放一个隐藏的
<input type="checkbox" id="menu-1"> -
label通过for="menu-1"关联该 checkbox，点击即 toggle 状态 - 子菜单用
.submenu { display: none; }，再写规则input#menu-1:checked ~ .submenu { display: block; } - 注意：CSS 中
~是后续兄弟选择器，所以input和.submenu必须同级且input在前 - 三级及以上无法纯 CSS 可靠实现：CSS 无法“向上查找父级”或“跨层级穿透”，
:has()兼容性差（Chrome 105+ 支持，Safari 15.4+ 仅部分支持，Firefox 未支持）
为什么不用 radio 实现单选折叠？
用 input[type="radio"] 可以做到“点一个、关其他”，但有硬伤：
- 所有 radio 必须同
name，导致无法独立控制多个一级菜单项（比如“产品”和“服务”要各自展开，不能互斥） - 一旦选中某个 radio，就无法“再点一次收起”，因为 radio 没有 uncheck 机制（除非加 JS）
- 移动端点透问题更明显：label 区域大，容易误触，且没有视觉反馈说明当前是否展开
真实项目中该怎么做？
放弃“纯 label”执念，用最小 JS 补足语义与交互断层：
立即学习“前端免费学习笔记（深入）”；
- 结构仍用
label包裹文字，button或带role="button"的div更合适作为触发器（label不是交互容器） - 菜单数据建议用
data-*属性存 ID 映射，例如data-target="submenu-products" - JS 只做三件事：监听点击、切换
aria-expanded、切换对应.submenu的hidden属性或 class - 务必补全键盘支持：
Enter/Space触发展开，Tab能进入子菜单，Escape关闭当前展开项
复杂点不在 label 怎么写，而在 focus 管理、ARIA 状态同步、以及移动端 touch/click 冗余事件处理——这些 label 根本不参与，但用户会感知到。
