如何用CSS实现响应式导航菜单折叠：hover与媒体查询结合的技巧？

在移动端网页开发中，导航菜单常常因为屏幕窄而难以排布。通过CSS的媒体查询配合hover伪类，我们可以用纯样式实现菜单的折叠与展开，无需任何JavaScript代码。这种方式兼容性好、实现简单，适合大多数内容型站点。

基础HTML结构

先准备一个普通的横向导航，使用无序列表嵌套子菜单。后续样式会控制它在不同宽度下的表现。

<nav class="menu">
  <ul>
    <li><a href="#">首页</a></li>
    <li class="has-sub">
      <a href="#">产品</a>
      <ul class="sub">
        <li><a href="#">网页版</a></li>
        <li><a href="#">客户端</a></li>
      </ul>
    </li>
    <li><a href="#">关于</a></li>
  </ul>
</nav>

桌面端：hover展开子菜单

在宽屏时，导航横向排列，鼠标悬停到带子菜单的项上就显示下拉内容。

.menu > ul {
  display: flex;
  list-style: none;
}
.menu li {
  position: relative;
  padding: 10px 15px;
}
.menu .sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #ddd;
}
.menu .has-sub:hover .sub {
  display: block;
}

媒体查询：小屏折叠菜单

当屏幕小于768像素，把导航改成竖排，并默认隐藏子菜单，依靠hover展开。

@media (max-width: 767px) {
  .menu > ul {
    flex-direction: column;
  }
  .menu li {
    padding: 12px 0;
    border-bottom: 1px solid #eee;
  }
  .menu .sub {
    position: static;
    border: none;
    padding-left: 15px;
  }
  .menu .has-sub:hover .sub {
    display: block;
  }
}

注意事项

• 触摸设备没有真实hover，可在媒体查询里改用点击后的active状态辅助，或接受点击穿透展开。
• 若使用<input>复选框 hack 做纯CSS折叠，要注意label绑定，避免和hover逻辑冲突。
• 媒体查询断点应根据实际内容调整，不要盲目使用768px。

小结

把媒体查询负责布局切换、hover负责交互展开结合起来，就能用很少的CSS完成响应式导航。理解这种思路后，你也能扩展出更多无脚本的交互组件。

CSS响应式导航媒体查询修改时间：2026-07-26 09:45:16