纯html本身无交互能力，需借表单控件（如checkbox:checked）与css兄弟选择器联动实现无js汉堡菜单；ie9+全平台稳定，键盘可聚焦、触控≥44px，子菜单必须为li直接子元素且结构语义完整。
纯 HTML 本身不提供交互能力，所谓“HTML 交互特征”其实是借用了表单控件的原生状态（如 :checked）和语义结构（如 nav、ul、li）来配合 CSS 实现无 JS 的基础交互。真正在小屏上点开收起菜单，靠的不是 onclick，而是 <input type="checkbox"> 的状态切换与兄弟选择器联动。
为什么必须用 input[type="checkbox"] 控制汉堡菜单显隐
这是目前唯一能在 IE9+ 全平台稳定工作的纯 CSS 方案。很多项目禁用 JS 或要求降级可用，此时 JS 加载失败 = 菜单永远不可见，而 checkbox 是浏览器原生控件，无需加载、不会阻塞、点击即响应。
- 把
<input id="menu-toggle" type="checkbox">放在<nav></nav>外部或顶部，确保它能通过~选择器影响后续菜单容器 -
label[for="menu-toggle"]必须包裹图标（三横线），且点击区域 ≥ 44px，否则 iOS 触控不灵敏 - 别用
display: none隐藏 checkbox —— 它得保持可聚焦、可 Tab 切换，否则键盘用户无法操作 - 移动端菜单容器（如
.nav-menu）默认设max-height: 0; overflow: hidden;，激活时靠https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bmenu-toggle:checked ~ .nav-menu设max-height: 300px
nav > ul > li > a 结构中下拉菜单怎么嵌套才不崩
下拉菜单失效，90% 是因为 DOM 层级写错。CSS 的 :hover 或 :checked ~ 选择器对父子关系极其敏感，跳一级或平级都会断链。
- 子菜单
ul必须是对应li的**直接子元素**，即li > ul.dropdown，不能是li + ul或外置到nav底层 -
li必须包含a，哪怕只是@#@#@#@#@#@#@#@#@#@0；空li会导致屏幕阅读器跳过、键盘 Tab 顺序断裂 - 桌面端悬停下拉：用
li:hover > ul，但需给父li设position: relative，子ul才能用position: absolute正确定位 - 移动端展开时，子菜单要重置定位：
.nav-menu ul { position: static; width: 100%; }，否则绝对定位会脱离滚动视口
Flex 布局里哪些参数会让导航栏在小屏上突然错位
Flex 看似简单，但 flex-shrink、flex-wrap 和 gap 的默认行为在窄屏下极易引发文字压缩、横向溢出或间距错乱。
- 别依赖默认
flex-shrink: 1—— 小屏下文字变长时，链接会被强行缩窄甚至换行，应显式写flex-shrink: 0或flex: 0 0 auto -
flex-wrap: nowrap（默认）在 320px 屏幕上会让 6 个导航项直接挤出视口，必须加flex-wrap: wrap并配合justify-content: center -
gap在 IE11 不支持，若需兼容，得回退到li:not(:last-child) { margin-right: 1rem; } - 每个
li设min-height: 44px（含 padding），iOS Safari 才会正确触发触控反馈，避免点击穿透
真正难的不是写出能动的导航栏，而是让它的语义链不断、焦点流不乱、触控区不虚、缩放后不下移——这些细节藏在 nav 和 input 的位置里，不在 JS 的 addEventListener 中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
