纯CSS实现响应式导航栏可行，须用触发:checked伪类控制显隐，配合相邻/兄弟选择器切换样式；禁用button或div因无法监听状态，且需确保DOM相邻、隐藏时保留可交互性（opacity:0+absolute），下拉菜单父元素必须设position:relative以精确定位。
纯 CSS 实现响应式导航栏是可行的，但必须用 <input type="checkbox"> 模拟开关状态——否则移动端点击无反应、跳转或只在部分浏览器生效，这是最常卡住人的地方。
为什么不能用 button 或 div 控制菜单显隐
CSS 无法监听 button 或 div 的“状态变化”，而 <input type="checkbox"> 的 :checked 伪类能被 ~（通用兄弟选择器）或 +（相邻选择器）精准触发样式切换。IE9+ 全面支持，无需 polyfill。
- 别写
href="#"：点完页面滚顶，且语义错误；空链接建议直接移除href，加role="button"补无障碍 - 别给
checkbox设display: none后再用 JS 操作——它就失效了；应配合opacity: 0; position: absolute;隐藏但保留可交互性 - 所有含下拉菜单的
<li>必须设position: relative，否则position: absolute的子菜单会相对body定位，滚动时飘走
position: absolute 下拉菜单总偏移？先查父容器有没有 position: relative
下拉项用 position: absolute 是为了脱离文档流、不撑高导航栏，但它必须相对于触发它的元素定位。如果父 <li> 没设 position: relative，它就会往上找最近的已定位祖先，甚至落到 上。
- 统一用
top: 100%; left: 0;，比写死top: 44px更可靠——导航高度变化时自动对齐 - 若出现像素级缝隙，可用
margin-top: -1px或改用transform: translateY(100%)，后者重绘更稳 - iOS Safari 中
position: fixed+transform易闪烁，此时优先用position: sticky; top: 0;
Flex 布局里导航项被压缩、换行错乱？关掉 flex-shrink 并设 flex-wrap
很多人写 nav ul { display: flex; } 就以为万事大吉，结果小屏上文字被压扁、图标错位、甚至横向溢出滚动条——问题出在默认 flex-shrink: 1 和没设 flex-wrap。
立即学习“前端免费学习笔记（深入）”；
- 每项加
flex: 0 0 auto，禁止缩放，文字变长也不变形 -
nav ul必须设flex-wrap: wrap，窄屏自动折行，比强行单行更健壮 - 避免用
float或display: table，它们在小屏下极易错位 - 移动端断点建议用
@media (max-width: 768px)，别用min-width反向写，容易漏掉小屏设备
真正难的不是写出能跑的代码，而是让下拉菜单在中英文混排、翻译后字数增加、iOS Safari 滚动、屏幕阅读器聚焦等边界场景下依然稳定——这些细节往往只在上线后暴露，且调试成本远高于初始实现。
