带动画效果的CSS Mega Menu开发问题求助

问题概述 #

• 带mega类的顶级导航项，Mega Menu容器正常显示，但下划线动画失效；
• 下移Mega Menu容器后下划线动画恢复，但鼠标从顶级链接移至容器时，因间隙触发hover状态取消，导致容器隐藏；
• 从Option1向右移动到Option2时，Mega Menu隐藏且下划线动画正常（符合预期），但移动到Sign In链接时，容器未隐藏且动画未触发。

修复代码 #

修改后的CSS代码 #

body #mainMenu {
  background-color: #fff;
  height: 80px;
  position: absolute;
  top: 0px;
  left: 0;
  width: 100%;
  padding: 10px;
  align-items: center;
  display: flex;
  padding-left: 40px;
  padding-right: 40px;
}

#menuOptions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  position: relative;
  width: 100%;
  padding: 0;
  list-style-type: none;
  font-size: 12px;
  font-weight: 400;
}

#menuOptions li {
  display: flex;
  position: relative; /* 让mega-container相对于当前li定位 */
  align-items: center;
}

#menuOptions li a {
  color: #000;
  padding: 10px 0; /* 扩大a标签的hover触发区域 */
}

#menuOptions li a:link {
  text-decoration: none;
}

.hover-underline-animation {
  display: inline-block;
  position: relative;
  color: #0087ca;
}

.hover-underline-animation:after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: red;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

/* 同时监听a标签自身hover和父li.mega hover时的下划线动画 */
.hover-underline-animation:hover:after,
.mega:hover .hover-underline-animation:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.mega-container {
  display: none;
  position: absolute;
  top: 100%; /* 定位到父li的底部下方，避免覆盖顶级链接 */
  left: 0;
  height: 120px;
  width: 100%;
  border-top: 10px solid transparent; /* 用透明边框填补间隙，保证hover连续 */
  margin-top: -10px;
}

.mega:hover .mega-container {
  display: block;
  padding-top: 20px; /* 配合top:100%调整容器位置 */
}

.mega-menu {
  background-color: yellow;
  height: 100px;
  padding: 60px;
}

修改后的HTML代码 #

<html>
<head>
  <title>Mega Menu</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <nav id='mainMenu'>
    <ul id='menuOptions'>
      <li><a href='#' class='menuTopLevelItem hover-underline-animation'>Sign In</a></li>
      <li class='mega'><a href='#' class='menuTopLevelItem hover-underline-animation'>Option 1</a>
        <div class='mega-container'>
          <div class='mega-menu'>
            <p>This is mega menu 1</p>
          </div>
        </div>
      </li>
      <li><a href='#' class='menuTopLevelItem hover-underline-animation'>Option 2</a></li>
      <li><a href='#' class='menuTopLevelItem hover-underline-animation'>Option 3</a></li>
      <li><a href='#' class='menuTopLevelItem hover-underline-animation'>Option 4</a></li>
      <li><a href='#' class='menuTopLevelItem hover-underline-animation'>Option 5</a></li>
      <li><a href='#' class='menuTopLevelItem hover-underline-animation'>Option 6</a></li>
    </ul>
  </nav>
</body>
</html>

问题逐一修复说明 #

1. 下划线动画失效
   原问题：mega-container设置top:0后覆盖了顶级链接，鼠标实际hover的是容器而非a标签。
   修复：

   • 给#menuOptions li添加position:relative，让容器相对于当前li定位；
   • 把mega-container的top改为100%，使其位于li底部下方，不再覆盖a标签；
   • 新增CSS规则，当li.megahover时，同步触发子元素a的下划线动画。

2. 鼠标移到容器时hover中断
   原问题：顶级链接和容器之间存在间隙，鼠标移过时离开li的hover区域。
   修复：

   • 给mega-container添加透明上边框并设置负margin，用不可见区域填补间隙，保证hover状态连续；
   • 给a标签增加上下内边距，扩大hover触发范围。

3. 移到Sign In时容器未隐藏
   原问题：容器相对于整个ul定位，鼠标从Option1移到左侧Sign In时，仍处于ul范围内，未触发li.mega的hover取消。
   修复：

   • 让容器相对于li.mega定位，鼠标离开该li区域时，hover状态立即取消，容器自动隐藏；
   • 调整后鼠标移到Sign In时，会脱离li.mega的hover范围，同时触发Sign In的下划线动画。

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