移动端导航栏必须用flex-col垂直堆叠并配合hidden/md:flex切换，禁用直接复用桌面flex-row；需统一控制逻辑、fixed全屏覆盖、max-h过渡动画及aria属性保障可访问性。
移动端导航栏必须用 flex + flex-col 布局，别套用桌面写法
直接把桌面导航的 flex-row 拿来改 md:flex-row，大概率点开就错位。移动端菜单本质是「隐藏→展开→垂直堆叠」，必须从布局根上区分：
默认用 flex-col 隐藏菜单项（配合 hidden），再用 md:flex-row md:space-x-6 切换为水平排列。
常见错误是只加 md:flex 却漏掉 flex-col，导致小屏下菜单项仍横向溢出。
hamburger 按钮和菜单内容要共用同一份 hidden / block 控制逻辑
不能一个用 hidden md:block、另一个用 hidden lg:block——断点不一致会导致按钮点了菜单却不出现。
实操建议统一用 hidden md:flex 控制菜单容器，按钮则用 md:hidden；如果用 JS 切换（比如点击后加 block 类），确保 JS 修改的是同一个 DOM 节点的 class，而不是靠不同断点“自动”显示。
另外，aria-expanded 和 aria-controls 属性别漏，否则屏幕阅读器无法识别开关状态。
菜单展开时必须加 fixed + inset-0，否则滚动会穿模
很多人用 absolute 或 relative 做下拉菜单，结果一滚动页面，菜单就卡在半空或消失。移动端全屏菜单必须用 fixed inset-0 覆盖整个视口，再配合 z-50 确保层级最高。
内容区域建议加 overflow-hidden 到 （JS 控制），不然菜单展开时还能滚动背景页。
性能注意：避免在 fixed 容器里放大量图片或复杂组件，容易触发重绘卡顿。
用 transition-all 做展开动画，但别对 height 做过渡
Tailwind 的 transition-all 默认包含 height，但 height: 0 → auto 是无法过渡的，会导致菜单瞬间弹出。
正确做法是用 max-h-0 + max-h-[500px]（估算最大高度）配 overflow-hidden，再加 transition-max-h；或者更稳妥地用 opacity + scale-y 模拟展开感。
如果项目已引入 @tailwindcss/forms，记得检查它是否覆盖了 transition 默认值——有时需要显式写 transition-opacity duration-300 才生效。
立即学习“前端免费学习笔记（深入）”；
真正难的不是写出能动的菜单，而是让菜单在 iOS Safari 里不闪、不卡、不吞 touch 事件，同时保持键盘可访问性。这些细节往往得靠真机反复点按调试，光看文档没用。
