用 checkbox 模拟开关实现点击展开导航栏，兼容 ie9+；移动端用 max-width 媒体查询隐藏菜单，li 设 position: relative 配合绝对定位下拉项；flex 布局中禁用 flex-shrink、设 min-height 44px 保障触控体验。
怎么用纯 html + CSS 写一个能点、能展开、不闪退的导航栏
直接说结论：不用 js 也能做基础响应式导航栏，但「点击展开」必须靠 checkbox 模拟开关状态，否则在移动端点一下就跳转或没反应——这是最常卡住人的地方。
真实场景里，你不是在写“教科书示例”，而是在补一个已有页面的导航，或者接一个设计稿。这时候别碰 Float 和 display: table，它们在小屏下极易错位；也别一上来就套 bootstrap，很多项目压根不允许外链 CDN 或引入整套 CSS。
- 用
<input type="checkbox">隐藏后绑定label控制菜单显隐，兼容到 IE9+ -
nav > ul > li > a结构最稳妥，语义清晰，seo 和屏幕阅读器都认 - 移动端菜单默认
display: none，用@media (max-width: 768px)切换，别用min-width反向写，容易漏掉小屏设备 - 别给
a加href="#"，点完页面滚顶；空链接写成href="javascript:void(0)"或干脆去掉href属性（用role="button"补语义）
为什么 position: absolute 在导航栏里容易出事
因为绝对定位脱离文档流，一旦父容器没设 position: relative，子菜单会相对 viewport 定位，滚动时飘走；更隐蔽的问题是：当导航项文字变长（比如中英文混排、翻译后字数增加），left: 0 或 right: 0 会导致下拉菜单被截断，且无法通过 overflow: visible 修复。
- 下拉菜单统一用
position: absolute，但它的父li必须有position: relative - 避免写
top: 100%，改用top: 100%; margin-top: -1px防止像素对齐缝隙 - 如果导航高度动态（比如多行文字、图标+文字），优先用
transform: translateY(100%)替代top，重绘更稳 - 在 ios safari 上，
position: fixed导航栏配合transform会有闪烁，此时改用position: sticky+top: 0更可靠
flexbox 布局做导航栏时，这些参数不能乱设
display: flex 是目前最省心的方案，但很多人栽在 flex-wrap 和 flex-shrink 上：设了 nowrap 却没处理溢出，结果小屏上导航项横向挤出屏幕；或者没关 flex-shrink，导致文字被压缩变形甚至换行错乱。
立即学习“前端免费学习笔记（深入）”；
-
nav { display: flex; flex-wrap: wrap; }—— 允许折行，比强制单行更适应窄屏 - 每个
a加flex: 0 0 auto，禁止缩放，文字长度变化不影响布局 - 用
justify-content: space-between时，注意两端对齐在项数为奇数时视觉不均，可改用space-around或加伪元素平衡 - 在旧版 Safari（iOS 9–12）中，
flex: 1对a标签支持不稳定，显式写flex: 1 1 auto更安全
移动端点击区域太小？别只加 padding
很多导航栏在手机上要点两三次才触发，不是手抖，是点击热区不足。CSS 的 padding 确实能撑开区域，但若只加在 a 上，手指按下去时 :hover 或 :active 效果可能延迟或不出现，尤其在 chrome for android 上。
- 给
li设min-height: 44px（iOS 推荐最小触控尺寸），再让a垂直居中，热区更准 - 用
touch-action: manipulation禁用双击缩放，减少点击延迟 - 避免在
a上同时设padding和border，盒模型计算容易出偏差；统一用padding控制尺寸，边框走outline或伪元素 - 真机测试时，打开 chrome devtools 的 “Toggle device toolbar” 后，务必勾选 “Disable cache” 和 “Throttle CPU”，否则模拟不出真实卡顿
最麻烦的从来不是“怎么写出来”，而是“换一种屏幕尺寸、换一个系统版本、换一批用户操作习惯之后，它还稳不稳”。导航栏恰恰是第一个被用户摸到的界面部件，容错空间极小。