无需JavaScript，如何取消响应式垂直菜单的hover效果？

完全可以通过纯CSS实现这个需求，核心是利用**媒体查询（Media Queries）**根据窗口尺寸切换样式规则，直接覆盖hover触发下拉的逻辑。

实现思路 #

1. 水平布局状态下，保留hover触发下拉菜单的样式；
2. 当窗口尺寸达到垂直布局的断点时，通过媒体查询重置hover相关的样式，禁用下拉触发效果；
3. 若需要移动端用点击触发下拉，还可以用纯CSS的checkbox hack实现（可选）。

示例代码 #

HTML结构

<nav class="main-nav">
  <ul>
    <li class="nav-item">
      <a href="#">菜单1</a>
      <ul class="dropdown">
        <li><a href="#">子菜单1</a></li>
        <li><a href="#">子菜单2</a></li>
      </ul>
    </li>
    <li class="nav-item">
      <a href="#">菜单2</a>
      <ul class="dropdown">
        <li><a href="#">子菜单A</a></li>
        <li><a href="#">子菜单B</a></li>
      </ul>
    </li>
  </ul>
</nav>

CSS样式

/* 默认水平布局样式 */
.main-nav ul {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-item {
  position: relative;
  padding: 0 1rem;
  line-height: 2.5rem;
}

.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  min-width: 120px;
  padding: 0.5rem 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* 水平布局下hover触发下拉 */
.nav-item:hover .dropdown {
  display: block;
}

/* 媒体查询：窗口宽度小于768px时切换为垂直布局 */
@media (max-width: 767px) {
  .main-nav ul {
    flex-direction: column;
    background: #f5f5f5;
    padding: 0.5rem;
  }

  .nav-item {
    padding: 0;
    border-bottom: 1px solid #eee;
  }

  .nav-item a {
    display: block;
    padding: 0 1rem;
  }

  /* 禁用hover触发下拉 */
  .nav-item:hover .dropdown {
    display: none;
  }

  /* 可选：用checkbox hack实现点击触发下拉（纯CSS） */
  .nav-item input[type="checkbox"] {
    display: none;
  }

  .nav-item .toggle-btn {
    display: inline-block;
    float: right;
    margin-right: 1rem;
    cursor: pointer;
  }

  .nav-item input[type="checkbox"]:checked ~ .dropdown {
    display: block;
    position: static;
    box-shadow: none;
    padding-left: 1rem;
  }
}

关键说明 #

• 媒体查询会在窗口宽度小于768px时触发，此时将导航切换为垂直布局，同时通过display: none覆盖hover状态下的下拉显示规则，直接禁用hover触发效果；
• 可选的checkbox hack部分，是纯CSS实现点击触发下拉的方案，完全不需要JavaScript；
• 整个方案依赖CSS选择器的优先级和媒体查询的响应式特性，全程无JS参与。

内容的提问来源于stack exchange，提问作者Lasha Lashashvili