应采用 checkbox + label 无 js 折叠菜单方案，通过 :checked 伪类控制显隐，配合 position: relative/absolute 定位、44×44px 点击区、max-height 过渡及 aria 属性焦点管理。
手机端导航栏文字重叠或换行怎么办
直接原因是容器宽度不足，但根本问题在于没做移动端适配的视觉降级。CSS 媒体查询只是入口，关键得让导航结构本身支持折叠——不能靠强行缩小 font-size 或压缩 padding 应付，那样会牺牲可点击区域和可读性。
典型现象包括：nav 内部 a 标签文字挤成一团、横向滚动出现、图标和文字错位。这不是样式微调能解决的，得切换 DOM 结构形态。
用 checkbox + label 实现无 JS 折叠菜单
这是最轻量、语义清晰、无障碍友好的方案。利用 :checked 伪类控制菜单显隐，避免依赖 JavaScript，也绕过 SSR 渲染不一致问题。
-
<input type="checkbox" id="nav-toggle">放在nav外层，不可见但保留在 tab 顺序中 -
<label for="nav-toggle"></label>作为汉堡图标容器，点击即触发状态切换 - 原导航项（
ul）默认display: none，仅在#nav-toggle:checked ~ nav ul时设为display: block - PC 端用
@media (min-width: 768px)强制显示全部导航项，并隐藏 checkbox 和 label
<nav>
<input type="checkbox" id="nav-toggle">
<label for="nav-toggle">☰</label>
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于</a></li>
<li><a href="#contact">联系</a></li>
</ul>
</nav>
折叠后菜单弹出位置偏移或遮挡内容
常见于没处理定位上下文，导致 ul 相对于视口错位。必须确保父容器 nav 有明确的 position: relative，且下拉菜单使用 position: absolute 配合 top: 100% 对齐。
立即学习“前端免费学习笔记（深入）”；
- 避免对
body或html设置overflow-x: hidden，否则 iOS Safari 会截断弹出层 - 菜单
ul加z-index: 1000，但别盲目设太高，防止与模态框等其他组件冲突 - 加过渡：用
max-height+overflow: hidden替代单纯display切换，实现淡入滑动效果（注意max-height要预估足够，比如max-height: 300px）
触摸设备点击区域太小，误触率高
移动端最小可点击区域应 ≥ 44×44px，但很多折叠菜单只给 a 标签设了 padding: 8px，实际点击热区远低于标准。
- 把
padding加到li或a的包裹元素上，而不是仅作用于文字 - 用
min-height: 44px+display: flex+align-items: center保证垂直居中且高度达标 - 禁用
-webkit-tap-highlight-color: transparent，否则 iOS 点击反馈消失，用户无法感知是否点中
折叠菜单不是“把东西藏起来就完事”，它改变了信息层级和交互路径。最容易被忽略的是焦点管理：键盘用户按 Tab 时，菜单未展开状态下不应把焦点落入隐藏的 a 标签中——得配合 aria-expanded 和 aria-hidden 动态控制可访问性属性。
