纯html无法实现折叠菜单，因为nav、ul、li等标签仅定义结构，不具备交互逻辑；必须依赖css的:checked伪类配合checkbox状态或javascript才能触发展开/收起行为。
为什么纯 HTML 无法实现折叠菜单
HTML 标签本身没有交互能力。nav、ul、li 只定义结构，不带「点击展开」逻辑。所谓“响应式菜单”，本质是 CSS 或 JS 对这些结构施加的控制行为。如果只写 HTML，小屏下菜单永远平铺、汉堡图标永远没反应——这不是漏写了什么标签，而是根本没触发任何状态变化。
input[type="checkbox"] + :checked 是唯一零 JS 可靠方案
浏览器原生支持 :checked 伪类，CSS 能直接监听它的状态；而 div 或 button 没有这类可被 CSS 捕获的状态，纯 CSS 无法实现切换。关键约束有三个：
-
input必须在 DOM 中位于目标菜单元素之前，否则~选择器选不到 -
label必须通过for属性或包裹方式正确关联该input，否则 iOS 触控区域可能小于 44px 导致点击失效 - 菜单容器不能用
display: none控制显隐——它会脱离文档流，导致父容器高度塌陷，页面内容上跳
用 max-height 实现过渡动画，别碰 display
display 属性无法参与 transition，强行加不会动。真正能做平滑展开的只有 max-height + overflow: hidden 组合：
- 初始状态：
.nav-menu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } - 激活状态：
#nav-toggle:checked ~ .nav-menu { max-height: 500px; }（数值需略大于所有子项总高，不能写死auto） - 千万别用
visibility: hidden配合动画——它仍占布局空间，会导致点击区域偏移、焦点错位
多级菜单必须用嵌套 ul，且层级控制靠 > 和 :has()
用 div 堆子菜单，屏幕阅读器读不出父子关系，键盘 Tab 会跳过子项，移动端定位也容易偏移。正确结构必须是 li > ul.nested，且 CSS 控制必须隔离层级：
- 错误写法：
.menu-item.active ul { display: block; }→ 所有深层子菜单一起弹出 - 正确写法：
.menu-item:has(> .nested).active > .nested { display: block; }→ 只开当前一级 -
:has()在 Safari/Chrome 已稳定支持，IE 不支持，需配合降级 class 如class="has-submenu"
真正难的不是让菜单“动起来”，而是它在 JS 失效、屏幕阅读器启用、键盘导航、缩放 200% 时，依然能被用户识别、抵达、操作——这些细节藏在 HTML 结构顺序、CSS 选择器精度和属性语义里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
