纯CSS响应式下拉菜单需守住三个锚点：语义结构用嵌套ul/li、父li必须position:relative、移动端用checkbox驱动；漏一环即引发iOS闪退、错位或焦点失效。
纯 CSS 实现响应式导航栏的下拉菜单，关键不是“加功能”，而是守住三个锚点：语义结构不能错、定位上下文必须显式声明、移动端交互必须靠 input[type="checkbox"] 驱动——漏掉任一环，就会出现 iOS Safari 闪退、高 DPI 错位、键盘无法聚焦子项等问题。
HTML 结构必须用嵌套 ul + li，不能脱离层级
下拉菜单不是浮层，是语义化导航树的一部分。错误写法是把 dropdown-content 提到 nav 外部或用 div 包裹；正确结构是子 ul 必须作为触发项 li 的直接子元素：
<nav aria-label="主导航">
<ul>
<li><a href="/home">首页</a></li>
<li class="dropdown">
<a href="/products" aria-haspopup="true" aria-expanded="false">产品</a>
<ul class="dropdown-content" role="menu">
<li role="none"><a href="/coats">大衣</a></li>
<li role="none"><a href="/shoes">鞋履</a></li>
</ul>
</li>
</ul>
</nav>
-
aria-haspopup="true"和aria-expanded="false"必须加在触发链接上，否则屏幕阅读器无法识别可展开状态 - 子
ul的role="menu"不可省略，且每个子项需用role="none"隔离，避免语义嵌套冲突 - 不要用
href="#"，空链接建议移除href并加role="button"
CSS 定位必须显式设 position: relative 在父 li 上
这是最常被跳过的一步。只要父 li 没设 position: relative，position: absolute 的下拉菜单就会相对于 body 或最近已定位祖先定位，滚动时飘走、小屏错位、翻译后截断全由此引发。
- 父
li.dropdown必须有position: relative，哪怕它本身没偏移 - 子
.dropdown-content用top: 100%; left: 0;，比写死top: 44px更可靠——导航高度变（比如加图标、多行文字）时自动对齐 - 避免
margin-top: -1px修缝隙，改用transform: translateY(100%)，重绘更稳，iOS Safari 兼容更好
移动端点击展开必须用 input[type="checkbox"]，不能靠 :hover 或 JS
桌面端悬停可用 :hover，但移动端没有 hover 状态，且点击事件默认会触发跳转或无响应。唯一零 JS、兼容 IE9+ 的方案是用 checkbox 控制显隐：
立即学习“前端免费学习笔记（深入）”；
- 在
nav内顶部加隐藏<input type="checkbox" id="nav-toggle">，配合<label for="nav-toggle">☰</label>做汉堡按钮 - 用兄弟选择器
#nav-toggle:checked ~ .nav-menu触发菜单显示，注意~是通用兄弟，+是相邻兄弟，别写反 -
input不能设display: none，应改用opacity: 0; position: absolute;保留可访问性与可聚焦性 - 移动端菜单默认
display: none，用@media (max-width: 768px)切换，别用min-width反向写，容易漏掉小屏设备
Flex 布局下这些参数不能乱设，否则小屏堆叠失效
用 display: flex 做导航主容器很常见，但几个关键属性一旦设错，会导致移动端菜单项横向溢出、文字压缩、点击区域变小：
- 主
ul设flex-wrap: nowrap同时必须配overflow-x: auto或媒体查询降级，否则小屏直接撑破容器 - 每个
li必须禁用flex-shrink: 0，否则文字变长（如中英文混排）时会被强行压缩甚至换行错乱 - 移动端竖排菜单项，
flex-direction: column要搭配max-height+overflow: hidden做过渡动画，因为 CSS 无法给height: auto加 transition - 触控区域至少
min-height: 44px，这是 iOS/Android 最小可点击尺寸标准，别只看视觉高度
真正难的不是写出能动的下拉菜单，而是让它的语义、定位、状态切换在所有设备和辅助技术中保持一致。很多问题看似是 CSS 错位，根子却在 HTML 层级断裂或 ARIA 属性缺失——调试时先查 aria-expanded 是否同步更新，再看父 li 有没有 position: relative，最后才动样式。
