核心是用 flex-col（移动端）和 md:flex-row（中屏以上）控制布局流向，折叠逻辑靠显示/隐藏类实现，推荐 checkbox hack 或 details/summary 标签替代 group-hover 和 JS。
如何用 flex + md:flex-row 控制菜单折叠与展开
响应式导航栏的核心不是写一堆媒体查询，而是利用 Tailwind 的断点前缀控制布局流向。默认用 flex-col 垂直堆叠（移动端），在中屏及以上切为 md:flex-row 水平排列。关键点在于：所有“折叠”逻辑都靠显示/隐藏类控制，不依赖 JS 也能跑通基础结构。
常见错误是直接给菜单项加 hidden md:block，结果点击汉堡按钮时菜单不出现——因为没配合 JS 切换 hidden 类。如果不用 JS，就只能靠 checkbox hack 或 :focus-within；若用 JS，则只需切换一个 hidden / block 类即可。
- 移动端默认
flex-col+hidden，汉堡按钮用md:hidden - 桌面端用
md:flex-row+md:space-x-6替代手动 margin - 避免对
nav元素设固定高度，否则折叠时内容被裁剪
为什么 group + group-hover 不适合下拉菜单
group 在导航栏里容易误触，尤其在触摸设备上没有 hover 状态。比如鼠标划过父级 li 触发下拉，但手指轻点会同时触发点击和 hover，导致菜单闪退或无法关闭。
更可靠的做法是用 JS 控制显隐，或者用原生 details/summary 标签（语义好、无需 JS、支持键盘操作）。Tailwind 对它完全友好：details[open] > summary 可加样式，details > ul 默认 hidden，details[open] > ul 设为 block 即可。
立即学习“前端免费学习笔记（深入）”；
- 别用
group-hover做主菜单下拉，移动端无 hover -
details是零 JS 下拉的首选，兼容性到 Chrome 12+/Safari 6+ - 若必须用 JS，只操作一个 class，如
data-open="true"→[data-open="true"] > ul显式匹配
peer 和 peer-checked 怎么配合汉堡按钮
用隐藏 checkbox + peer 实现纯 CSS 折叠菜单，比 JS 更轻量，也避免 SSR 时闪动。核心是把 checkbox 放在汉堡按钮前，按钮用 peer 关联，菜单用 peer-checked ~ ul 触发显示。
注意：checkbox 必须和菜单在同一 DOM 层级或前置，且不能被 display: none 完全移出流（可用 opacity-0 w-0 h-0 absolute 隐藏但保留可访问性）。
- HTML 结构顺序必须是：
input[type="checkbox"]→label（汉堡）→nav（菜单） - 菜单选择器写成
.peer:checked ~ nav ul，不是.peer:checked + nav ul（+ 只匹配紧邻兄弟） - 移动端点击 label 会自动 toggle checkbox，无需额外事件监听
字体大小、间距和焦点可见性的实际取舍
响应式不只是布局变化，还要适配交互方式。移动端需更大点击区域（至少 44×44px），桌面端则要保证键盘导航时焦点清晰。Tailwind 的 text-sm md:text-base 和 py-2 md:py-3 很实用，但别忽略 focus:ring-2 focus:ring-blue-500 focus:outline-none。
容易被忽略的是 prefers-reduced-motion。如果菜单有展开动画，记得用 motion-safe:transition-all 包裹，否则残障用户开启减少运动后可能卡住状态。
- 汉堡图标建议用 SVG 内联，避免加载失败或尺寸错乱
- 菜单
ul加md:static防止脱离文档流后定位偏移 - 用
aria-expanded和aria-controls同步 JS 状态，屏幕阅读器才认得清
