纯CSS下拉导航条制作详解

之间的任何物理间隙
• 让子菜单紧贴父项底部（通常用 top: 100% + position: absolute）

典型修复 CSS：

.nav li { position: relative; }
.nav .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-5px);
  transition: all 0.2s ease;
}
.nav li:hover .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

注意：

• 不能只靠 display: none/block 切换，会导致过渡失效
• visibility: hidden 配合 opacity 才能实现平滑淡入
• transform 比 top 更利于 GPU 加速，避免抖动

移动端点击无法展开？这不是:hover的锅

:hover 在触摸设备上行为不一致：iOS Safari 只在第一次点击时触发，之后需点击空白处再点菜单才生效；Android Chrome 可能完全不触发。

这不是写法错误，而是 CSS 规范限制。纯 CSS 方案在移动端本质不可靠。

应对策略：

• 用 @media (hover: hover) and (pointer: fine) 做媒体查询，只对鼠标设备启用 :hover 下拉
• 对触摸设备降级为点击展开（需 JS 监听 click 并切换 aria-expanded 和类名）
• 或直接放弃纯 CSS，改用 details/summary（原生支持，但样式定制弱）

键盘焦点和可访问性容易被忽略的细节

仅靠 :hover 的菜单默认不响应键盘 Tab 或 Enter，屏幕阅读器也无法感知子菜单存在。

必须补全：