如何在下拉Mega Menu中使标题居中显示于两个无序列表上方？

核心实现思路 #

通过CSS Grid布局可以轻松实现标题居中在两个无序列表上方的效果：将下拉菜单容器设为网格布局，让标题占满所有列宽，两个列表各占一列，同时给标题设置居中对齐。

修正后的代码示例 #

HTML结构 #

<nav>
  <ul class="main-nav">
    <li class="mega-menu-parent">
      <a href="#">产品分类</a>
      <!-- 下拉Mega Menu容器 -->
      <div class="mega-menu">
        <h2 class="mega-title">热门产品</h2>
        <ul class="menu-column">
          <li><a href="#">电子产品</a></li>
          <li><a href="#">家居用品</a></li>
          <li><a href="#">户外装备</a></li>
        </ul>
        <ul class="menu-column">
          <li><a href="#">美妆护肤</a></li>
          <li><a href="#">服饰鞋包</a></li>
          <li><a href="#">食品生鲜</a></li>
        </ul>
      </div>
    </li>
  </ul>
</nav>

CSS样式 #

/* 基础导航样式 */
.main-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #2c3e50;
  display: flex;
}

.main-nav li {
  position: relative; /* 让下拉菜单相对父元素定位 */
  padding: 15px 20px;
}

.main-nav a {
  color: #fff;
  text-decoration: none;
}

/* Mega Menu核心样式 */
.mega-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 500px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  padding: 20px;
  /* 网格布局：2列等宽 */
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* 标题占满整行 */
.mega-title {
  grid-column: 1 / -1;
  text-align: center;
  margin: 0 0 15px 0;
  color: #2c3e50;
}

/* 列表列样式 */
.menu-column {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-column li {
  padding: 8px 0;
}

.menu-column a {
  color: #34495e;
  text-decoration: none;
}

.menu-column a:hover {
  color: #3498db;
}

/* 鼠标悬停显示下拉菜单 */
.mega-menu-parent:hover .mega-menu {
  display: grid;
}

代码优化建议 #

1. 定位基础：给包含下拉菜单的父元素（.mega-menu-parent）设置position: relative，确保下拉菜单的绝对定位是相对于父元素，避免出现偏移或溢出问题。
2. 布局选择：Grid布局比Flex更适合这种“标题跨列+多列内容”的场景，代码更简洁直观。
3. 样式统一：移除所有列表的默认内外边距和项目符号，避免浏览器默认样式干扰。
4. 交互优化：给链接添加hover效果，提升用户体验；下拉菜单添加阴影，增强层次感。
5. 响应式适配：小屏幕下可通过媒体查询将Grid布局改为单列：

@media (max-width: 600px) {
  .mega-menu {
    grid-template-columns: 1fr;
    width: 250px;
  }
}

6. 避免覆盖问题：确保下拉菜单的z-index足够高，不会被其他元素遮挡；同时不要给标题设置固定高度或绝对定位，让Grid布局自然控制位置。

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