不用javascript也能实现响应式顶部导航栏，关键在于语义化结构（nav+ul+li）、桌面端flex布局（justify-content:space-around、flex:0 0 auto、gap控制间距）和移动端checkbox控制显隐（input前置、max-height过渡、父li设position:relative）。
不用 JavaScript 也能做出能点、能收、不闪退的响应式顶部导航栏，关键在三处：结构语义必须用 nav + ul + li，桌面端靠 display: flex 水平铺开，移动端靠 input[type="checkbox"] 控制显隐——漏掉任一环，小屏下就卡死或错位。
为什么必须用 nav + ul + li 而不是 div 堆砌
这不是“写得规范”，而是浏览器和辅助技术依赖这套语义链：nav 告诉读屏器“这是主导航区”，ul 表示一组并列项（屏幕阅读器会报“共 4 个菜单项”），li 必须直接包裹 a，否则下拉菜单的 :hover 或 :checked ~ 选择器会失效。如果用 div 替代，键盘 Tab 顺序错乱、SEO 权重下降、移动端焦点管理失控都是真实踩过的坑。
桌面端 flex 布局怎么写才不翻车
nav ul 设 display: flex 是基础，但容易忽略几个细节：
- 用
justify-content: space-around比space-between更稳——文字长度不均时两端留白一致，视觉不飘 - 给每个
li加flex: 0 0 auto，禁止缩放；别设flex-shrink: 1，否则窄屏下文字被压扁甚至换行错乱 - 间距统一用
gap: 1rem，比给每个li加margin-right干净，也避开“最后一个要不要清 margin”的纠结 - IE11 不支持
gap，得退回到li:not(:last-child) { margin-right: 1rem; }
移动端点击展开为什么非得用 checkbox
想纯 CSS 实现点击展开/收起，唯一可靠方案是 input[type="checkbox"]。常见错误是直接写 div class="hamburger" 配 JS，但 JS 加载失败时菜单永远不可见。正确做法：
-
input放在label前，用for关联，确保点击区域 ≥ 44px（iOS 最小触控要求） -
ul.nav-menu默认设max-height: 0; overflow: hidden;，别用display: none（它无法触发 CSS 过渡） - 触发时靠
input:checked ~ .nav-menu设max-height: 300px，数值需略大于所有子项总高，否则动画截断；别写死300px——动态增减项时得预估或交由 JS 补充
真正难的不是写出来，而是让下拉菜单在中英文混排、翻译后字数变化、滚动页面时都不偏移、不闪烁、不被截断——这些细节藏在 position: relative 的父 li、transform: translateY(100%) 替代 top: 100%、以及 iOS 上改用 position: sticky 而非 fixed 里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
