移动端菜单未占满全宽且横向堆叠，是因媒体查询未重置nav的flex-direction为column、未设width:100%及未清除float/inline-block；点击闪退或需双击是label缺少cursor:pointer或input隐藏方式不当；动画生硬因误用display过渡，应改用max-height或transform；子菜单错位需父li加position:relative并分层控制max-height。
移动端展开时菜单没占满全宽，内容横向堆叠
这是 flex 布局未在断点内重置导致的。桌面端 nav 用 display: flex 横向排列，但媒体查询里只隐藏了桌面菜单、没改 nav 自身的 display 或方向，结果移动端 nav 还是 inline-flex 或 row，li 就挤成一行。
必须显式设置：
-
nav在@media (max-width: 768px)内设display: flex+flex-direction: column -
nav宽度设为width: 100%（父容器若没撑开，它不会自动占满） -
li移除所有float、inline-block，避免换行失效
点击汉堡后菜单闪一下就收起，或 iOS 上要点两次
根本原因不是 JS 绑错了事件，而是 HTML 结构触发机制不健壮。纯 <input type="checkbox"> + <label></label> 在 Safari 和部分 WebView 中，若 label 没包裹可聚焦元素或没加 cursor: pointer，第一次点击无法激活 :checked 状态。
安全做法：
立即学习“前端免费学习笔记（深入）”；
-
label必须带cursor: pointer，且内部包裹一个<span></span>或图标元素（不能空） -
input用position: absolute; left: -9999px隐藏，禁用display: none（语义和读屏器会丢失） - 菜单容器（如
nav）不用display: none控制显隐，改用max-height: 0+overflow: hidden+transition
菜单展开动画生硬，像“啪”一下弹出来
直接切 display 属性永远做不到平滑过渡，因为 display 不是可动画属性。CSS transition 对它完全无效。
真正可过渡的方案只有两个方向：
- 用
max-height：初始max-height: 0，展开时设一个略大于内容高度的固定值（比如max-height: 400px），配合overflow: hidden - 用
transform：菜单默认transform: translateX(-100%)，展开时变为transform: translateX(0)，加transition: transform 0.3s ease
选哪个取决于结构——如果菜单是固定位置（比如从左滑入），transform 更自然；如果要垂直下拉，max-height 更稳妥。
子菜单在移动端展开后错位或不显示
桌面端下拉靠 :hover 或 JS 控制 display，但移动端没 hover，且折叠菜单里嵌套的 ul 若没单独处理，会继承父级 max-height: 0 被截断。
必须分层控制：
- 主菜单用
max-height控制整体展开/收起 - 每个子菜单项（如
.dropdown-menu）单独加max-height过渡，不能只依赖父级 - 子菜单的
opacity和visibility可配合transform做二级动画，但别用display
最易被忽略的是：子菜单的 position: absolute 在 flex column 下会脱离文档流，导致定位偏移。解决方案是给父 li 加 position: relative，再让子 ul 相对它定位。
