鼠标从菜单移至子菜单时子菜单消失，求CSS修改方案

问题根源 #

你当前的代码中，子菜单.sub-1是level_1链接的相邻兄弟元素，只有当鼠标悬停在level_1链接上时才会触发显示。一旦鼠标离开链接移向子菜单，链接的hover状态消失，子菜单就会被隐藏。另外，子菜单使用负margin定位，和父元素之间存在视觉间隙，鼠标移动时容易触发hover中断。

修改方案 #

无需使用<ul>/<li>标签，只需调整HTML结构和CSS规则即可解决，具体步骤如下：

1. 调整HTML结构

将level_1链接和对应的子菜单.sub-1包裹在同一个容器中，让hover状态可以覆盖父菜单项和子菜单的范围：

<div class="dropdown" id="myDropdown">
  <button class="dropbtn">
    <i style="font-size: 24px" class="fa"></i> level_0
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-content">
    <!-- 新增容器包裹父菜单项和子菜单 -->
    <div class="dropdown-item">
      <a href="#">level_1</a>
      <div class="sub-1">
        <a href="#">level_1-1</a>
        <a href="#">level_1-2</a>
        <a href="#">level_1-3</a>
      </div>
    </div>
    <a href="#">level_2</a>
    <a href="#">level_3</a>
  </div>
</div>

2. 修改CSS规则

针对新的结构调整hover逻辑，优化子菜单定位，消除hover中断的可能：

.dropdown .dropbtn {
  border: none;
  outline: none;
  color: #0f4391;
  padding: 8.5px 15px;
  background-color: inherit;
  font-family: inherit;
}

.dropdown-content,
.sub-1 {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a,
.sub-1 a {
  float: none;
  color: #0f4391;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropbtn:hover {
  background-color: lightgray;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* 新增容器样式，设置相对定位作为子菜单的参考 */
.dropdown-content .dropdown-item {
  position: relative;
}

/* 当容器hover时显示子菜单，覆盖父菜单项和子菜单的范围 */
.dropdown-content .dropdown-item:hover .sub-1 {
  background-color: hotpink;
  display: block;
  /* 用left和top定位，避免负margin导致的间隙 */
  left: 100%;
  top: 0;
}

/* 可选：给容器hover时也加上背景色，提升交互反馈 */
.dropdown-content .dropdown-item:hover > a {
  background-color: lightgray;
  color: black;
}

关键修改点 #

• 结构调整：将父菜单项和子菜单放入同一容器，让hover状态作用于整个区域，而非单个链接
• 定位优化：使用left: 100%; top: 0;替代负margin，消除子菜单和父元素之间的间隙，避免鼠标移动时触发hover中断
• hover逻辑：改为监听容器的hover状态，确保鼠标在父菜单项或子菜单上时，子菜单始终保持显示

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