如何避免鼠标悬停时所有下拉菜单同时展开？

核心问题分析 #

所有下拉菜单同时展开，大概率是CSS触发逻辑未关联到单个下拉容器，或是HTML结构没有给每个下拉菜单分配独立父容器，导致hover事件触发了全局的下拉内容显示。

具体修复步骤 #

1. 修正HTML结构 #

确保每个下拉菜单拥有独立的.dropdown容器，触发按钮和下拉内容都嵌套在同一个.dropdown内，示例结构：

<div class="dropdown">
  <button class="move">下拉按钮1</button>
  <div class="dropdown-content">
    <a href="#">选项1</a>
    <a href="#">选项2</a>
  </div>
</div>
<div class="dropdown">
  <button class="move">下拉按钮2</button>
  <div class="dropdown-content">
    <a href="#">选项A</a>
    <a href="#">选项B</a>
  </div>
</div>

注意：.move仅作为触发按钮的定位类，不要将它作为.dropdown的父元素，否则会破坏下拉容器的层级关系。

2. 调整CSS触发逻辑 #

给.dropdown添加相对定位，确保下拉内容的绝对定位基于当前下拉容器；同时通过父容器hover触发子元素显示，实现单个菜单独立展开：

/* 给下拉容器添加相对定位，作为下拉内容的定位基准 */
.dropdown {
  position: relative;
  display: inline-block; /* 让多个下拉按钮横向排列 */
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #FFFFFF;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* 仅hover当前.dropdown时，显示其内部的dropdown-content */
.dropdown:hover .dropdown-content {
  display: block;
}

/* 按钮定位样式保持不变 */
.move {
  float: left;
  margin: -65px 15px 75px 650px;
}

3. 排查额外异常 #

如果调整后仍有问题，检查以下几点：

• 是否存在全局CSS选择器（比如直接用.dropdown-content:hover）触发显示，这类选择器会让所有下拉内容在hover时展开；
• 多个.dropdown的z-index是否合理，避免菜单被其他元素遮挡；
• .move的margin定位是否导致多个触发按钮重叠，造成hover时同时触发多个容器的hover事件。

内容的提问来源于stack exchange，提问作者Alex Kulak