如何实现多级下拉菜单的平滑悬停切换（避免子菜单消失）

✅ 正确解法是：将触发项与子菜单共同包裹在一个可悬停的容器内，使悬停作用域覆盖“入口链接 + 子菜单整体”，从而保证鼠标在二者之间移动时，父容器始终处于 :hover 状态。

✅ 推荐HTML结构调整（语义清晰 + CSS可控）

<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">
    <!-- 将 level_1 及其子菜单封装为一个 hover 容器 -->
    <div class="dropdown-item">
      <a href="#" class="dropdown-link">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="#" class="dropdown-link">level_2</a>
    <a href="#" class="dropdown-link">level_3</a>
  </div>
</div>

✅ 对应CSS关键修复（支持无限级延伸）

/* 保持原有基础样式 */
.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: 0 8px 16px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

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

/* 核心修复：悬停作用域上提至容器 */
.dropdown:hover .dropdown-content {
  display: block;
}

/* 关键！让 .dropdown-item 容器悬停时显示其内部 .sub-1 */
.dropdown-item:hover .sub-1 {
  display: block;
  margin-left: 160px;   /* 水平偏移，形成二级菜单 */
  margin-top: -40px;    /* 微调垂直对齐 */
  top: 0;               /* 重置定位起点 */
}

/* 可选：添加过渡动画提升体验 */
.dropdown-content,
.sub-1 {
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.dropdown:hover .dropdown-content,
.dropdown-item:hover .sub-1 {
  opacity: 1;
  transform: translateY(0);
}

⚠️ 注意事项与最佳实践

• 不要依赖 + 或 ~ 选择器跨非嵌套元素控制显示：CSS 无法监听“鼠标正在移向相邻元素”的过程，必须用共同父容器的 :hover 维持状态。
• 层级定位需精确：.sub-1 应设 position: absolute，且其父容器（.dropdown-item）需设 position: relative（补充此行）：

  .dropdown-item { position: relative; }

• 无障碍友好：建议为下拉区域添加 role="menu" 和 aria-haspopup="true" 等属性，并配合键盘导航逻辑（超出本CSS范围，但生产环境必需）。
• 移动端兼容：纯 :hover 在触摸设备上不生效，如需支持，应结合JavaScript监听 click 或使用 @media (hover: hover) 媒体查询做降级。

通过以上结构与样式重构，鼠标可在 level_1 → .sub-1 → 子项间自由移动而菜单持续可见，彻底解决“悬停中断闪退”问题。此模式可递归扩展至三级（.sub-2）、四级菜单，只需遵循“触发项与其子菜单共属同一可悬停容器”的原则即可。