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

医真AI+开放平台

医真AI+ 医学AI开放平台

下载

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

  
     level_0
    
  
  

    
    

      level_1
      

        level_1-1
        level_1-2
        level_1-3
      
    

    level_2
    level_3
  

✅ 对应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）、四级菜单，只需遵循“触发项与其子菜单共属同一可悬停容器”的原则即可。