如何在悬停导航列表项时显示同级mega-menu元素

问题现状 #

悬停导航列表项时，无法触发.mega-menu的显示样式；需要实现导航项悬停或鼠标停留在mega-menu上时保持显示，否则隐藏的效果。

核心问题分析 #

1. CSS选择器错误：原选择器.nav-menu li a:hover .mega-menu试图选中a标签的子元素.mega-menu，但实际.mega-menu是.nav-menu的同级元素，并非a的子元素，导致样式无法生效。
2. 未处理间隙问题：导航和mega-menu之间存在间距，鼠标从导航移向mega-menu时会触发隐藏，影响交互体验。

修复方案 #

修改HTML结构 #

给父容器添加明确类名，确保导航与mega-menu处于同一父级下：

<div class="header-container">
  <ul class="nav-menu">
    <li>
      <a href="#">Navigation item</a>
    </li>
    <li>
      <a href="#">Navigation item</a>
    </li>
    <li>
      <a href="#">Navigation item</a>
    </li>
    <li>
      <a href="#">Navigation item</a>
    </li>
    <li>
      <a href="#">Navigation item</a>
    </li>
  </ul>

  <div class="mega-menu">
    This mega menu should only be visible when one of the list items in the nav
    menu is hovered on (and then once open will close when no longer hovering on
    the mega menu)
  </div>
</div>

更新CSS代码 #

1. 调整选择器，利用父容器的hover状态控制mega-menu显示；
2. 添加过渡动画优化视觉体验；
3. 填补导航与mega-menu的间隙，避免交互中断：

.header-container {
  position: relative; /* 让mega-menu的absolute基于此容器定位 */
}

.nav-menu {
  min-height: 112px;
  padding-left: 5.6rem;
  padding-right: 5.6rem;
  background-color: green;
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  padding-bottom: 16px; /* 填补间隙，让鼠标移动时不会脱离父容器hover范围 */
}

.nav-menu li {
  list-style: none;
}

.nav-menu li a {
  color: white;
  text-decoration: none;
}

.nav-menu li a:hover{
  text-decoration: underline;
}

.mega-menu {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  background-color: lightblue;
  width: 100%;
  min-height: 250px;
  top: 100%; /* 改为基于父容器底部定位，避免固定值导致的间隙 */
  left: 0;
  text-align: center;
  transition: visibility 0.3s, opacity 0.3s ease; /* 添加过渡动画 */
}

/* 父容器hover时显示mega-menu */
.header-container:hover .mega-menu {
  visibility: visible; 
  opacity: 1;
}

效果说明 #

• 悬停任意导航项时，父容器触发hover状态，mega-menu平滑显示；
• 鼠标从导航移向mega-menu时，由于父容器的padding-bottom填补了间隙，hover状态持续，mega-menu保持显示；
• 鼠标离开导航和mega-menu区域时，mega-menu平滑隐藏。

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