鼠标悬停按钮时显示右侧子菜单的交互问题求助

问题说明 #

• 按钮悬停时需激活右侧子菜单，但当前代码存在两处问题：
  1. 原规则.dropdown:hover .dropdown-content会导致鼠标经过外层容器任意区域（即使按钮不在该区域）时，子菜单都会被触发显示
  2. 修改为.dropdown > .dropbtn:hover + .dropdown-content后，子菜单仅在按钮悬停时显示，但鼠标移至子菜单上时会立即消失
• 现有公开示例多针对下方布局的子菜单，无法适配右侧子菜单的需求

修改后的解决方案代码 #

CSS 代码

.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  width: 120px;
  height: 52px;
}

.dropdown {
  display: inline-flex; /* 避免容器占满整行，减少误触区域 */
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute; /* 绝对定位，不影响按钮布局 */
  left: 100%; /* 将子菜单定位到按钮右侧 */
  top: 0;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* 核心规则：按钮悬停时显示子菜单，子菜单自身悬停时保持显示 */
.dropbtn:hover ~ .dropdown-content,
.dropdown-content:hover {
  display: block;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

HTML 代码（无需调整）

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

关键修改点 #

1. 子菜单定位：将.dropdown-content改为绝对定位，通过left: 100%固定在按钮右侧，确保鼠标从按钮移动到子菜单的路径连续，不会触发hover中断
2. hover规则优化：使用兄弟选择器~和子菜单自身的hover状态组合，既保证只有按钮悬停时才触发子菜单，又能让子菜单在鼠标停留时保持显示
3. 容器布局调整：将.dropdown改为inline-flex，避免容器默认占满整行，减少不必要的hover触发区域

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