CSS如何制作纯CSS实现的下拉导航条_利用:hover伪类显示下级-css教程-PHP中文网

纯CSS下拉菜单需严格嵌套：子必须是父的直接子元素，消除间隙并用position:absolute+top:100%定位；移动端需JS降级，且必须补全aria属性与键盘导航支持。

css如何制作纯css实现的下拉导航条_利用:hover伪类显示下级

下拉导航条的HTML结构怎么搭才不踩坑

纯CSS下拉菜单依赖层级关系，

嵌套必须严格、语义清晰。常见错误是把子菜单放在父

外面，导致 :hover 一移开就收起——因为鼠标经过了“空白间隙”。

正确的结构是：

<nav><ul class="nav">
<li><a href="#">首页</a></li>
    <li class="has-sub">
      <a href="#">产品</a>
      <ul class="sub-menu">
<li><a href="#">Web端</a></li>
        <li><a href="#">移动端</a></li>
      </ul>
</li>
  </ul></nav>

关键点：

子必须是父
的直接子元素
不要用 包裹子菜单，否则破坏语义且增加定位复杂度
class="has-sub" 是可选但推荐的标记，方便后续加箭头或JS增强


:hover 触发时为什么子菜单一闪就消失
根本原因是：当鼠标从父  移向子 
 时，如果两者之间有垂直间距（比如 margin 或 line-height 导致的空隙），:hover 状态会中断。
解决方法只有两个：

消除父 
 和子  之间的任何物理间隙
让子菜单紧贴父项底部（通常用 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婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。
												
												下载
												
											
										
这不是写法错误，而是 CSS 规范限制。纯 CSS 方案在移动端本质不可靠。
应对策略：

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

键盘焦点和可访问性容易被忽略的细节
仅靠 :hover 的菜单默认不响应键盘 Tab 或 Enter，屏幕阅读器也无法感知子菜单存在。
必须补全：

给父  加 aria-haspopup="true" 和 aria-expanded="false"

子  加 role="menu"，子项  加 role="menuitem"

用 JS 监听 keydown 实现方向键导航（↑↓切换，Esc 关闭）

纯 CSS 方案在此处天然残缺——它只解决“显示”，不解决“可操作”和“可发现”。
真正上线前，至少要验证：能否只用键盘打开、聚焦、关闭、跳转。做不到这点，就不是合格的导航。