将标题置于大型下拉菜单中两个无序列表的中心

Question

我希望将标题置于两个无序列表顶部的中心。我对 HTML、CSS 和 JS 相当陌生，所以我的首选通常是 chat gpt 或只是 google，但我似乎找不到任何如何最好地做到这一点的示例，并且 chat gpt 似乎不知道我想要什么所以我认为这里是最好的地方。

正如我之前提到的，我希望将标题置于两个无序列表的中心。我已经在这张图片中大致说明了我想要的内容：

我当前的所有代码都在此 Codepen 中：Codepen 代码，我希望您能帮助我。

我尝试以多种方式定位标题并更改列表的样式，但我似乎只能使标题出现在所有链接的顶部，如下所示：，或者让标题出现在单个框中的侧面，如下所示：（请注意框底部的下划线，因为我使用边框作为下划线）。我最好只做 css 和 html 。如果您不喜欢使用 codepen，这里是代码：

HTML：

<nav>
  <div class="container">
    <ul class="menu-main">
      <li class="Tab1"><a href="">Tab 01</a>
        <div class="menu-sub">
          <ul>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
            <li><a href="">Link 4</a></li>
            <li><a href="">Link 5</a></li>
          </ul>
        </div>
      </li>
      <li class="Tab2"><a href="">Tab 02</a>
        <div class="menu-mega">
          <ul>
            <h3>Category</h3>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
            <li><a href="">Link 4</a></li>
            <li><a href="">Link 5</a></li>
          </ul>
          <ul>
            <h3>Category</h3>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
            <li><a href="">Link 4</a></li>
            <li><a href="">Link 5</a></li>
          </ul>
          <ul>
            <h3>Category</h3>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
            <li><a href="">Link 4</a></li>
            <li><a href="">Link 5</a></li>
          </ul>
          
        </div>
      </li>
      <li class="Tab2"><a href="">Tab 03</a>
        
        <div class="menu-mega">
          
          <ul>
            <h3>Category</h3>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
            <li><a href="">Link 4</a></li>
            <li><a href="">Link 5</a></li>
          </ul>
          <ul>
            <h3>Category</h3>
            <ul>
              <li><a href="">Link 1</a></li>
              <li><a href="">Link 2</a></li>
              <li><a href="">Link 3</a></li>
              <li><a href="">Link 4</a></li>
              <li><a href="">Link 5</a></li>
            </ul>
            <ul>
                <li><a href="">Link 1</a></li>
                <li><a href="">Link 2</a></li>
                <li><a href="">Link 3</a></li>
                <li><a href="">Link 4</a></li>
                <li><a href="">Link 5</a></li>
              </ul>
          </ul>
          
        </div>
       
      </li>
      <li><a href="">Tab 04</a></li>
    </ul>
  </div>
</nav>

CSS：

* {
  margin: 0;
}

ul {
  list-style: none;
  padding: 0;
}
a {
  text-decoration: none;
  color: white;
}
body {
  background: #333333;
}
.container {
  width: 100%;
  height: 40px;
  background: #666666;
}
.menu-main {
  display: flex;
  justify-content: start;
}
.menu-main li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px 10px;
  height: 40px;
  width: 100px;
  position: relative;
  transition: all 0.5s;
}
h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin: 0 10px 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  
}
.menu-main li:hover {
  background: gray;
}
.menu-sub {
  display: flex;
  justify-content: center;
  pointer-events:none;
  opacity: 0;
  position: absolute;
  top: 40px;
  left: 0px;
  background: #555555;
  width: 100%;
  transition: all 0.2s ease-in-out;
}
.Tab1:hover .menu-sub,
.Tab2:hover .menu-mega
{
  opacity: 1;
  pointer-events:auto;
}
.menu-sub ul li {
  transition: all 0.2s ease-in-out;
}
.menu-mega {
  display: flex;
  pointer-events:none;
  opacity: 0;
  justify-content: space-evenly;
  position: absolute;
  top: 40px;
  left: 0px;
  background: #555555;
  width: auto;
  padding: 10px;
  transition: all 0.2s ease-in-out;
}

如果我能对我的代码做出任何改进，我将非常感激，因为我的网络开发之旅还只有两周时间，而且我一直在寻找如何改进！谢谢！

Answer 1

您需要在要并排显示的两个列表周围添加一个弹性包装器。

* {
  margin: 0;
}

ul {
  list-style: none;
  padding: 0;
}
a {
  text-decoration: none;
  color: white;
}
body {
  background: #333333;
}
.container {
  width: 100%;
  height: 40px;
  background: #666666;
}
.menu-main {
  display: flex;
  justify-content: start;
}
.menu-main li {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0px 10px;
  height: 40px;
  width: 100px;
  position: relative;
  transition: all 0.5s;
}
h3 {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin: 0 10px 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.3);
  
}
.menu-main li:hover {
  background: gray;
}
.menu-sub {
  display: flex;
  justify-content: center;
  pointer-events:none;
  opacity: 0;
  position: absolute;
  top: 40px;
  left: 0px;
  background: #555555;
  width: 100%;
  transition: all 0.2s ease-in-out;
}
.Tab1:hover .menu-sub,
.Tab2:hover .menu-mega
{
  opacity: 1;
  pointer-events:auto;
}
.menu-sub ul li {
  transition: all 0.2s ease-in-out;
}
.menu-mega {
  display: flex;
  pointer-events:none;
  opacity: 0;
  justify-content: space-evenly;
  position: absolute;
  top: 40px;
  left: 0px;
  background: #555555;
  width: auto;
  padding: 10px;
  transition: all 0.2s ease-in-out;
}
.multi {
  display: flex;
}

<nav>
  <div class="container">
    <ul class="menu-main">
      <li class="Tab1"><a href="">Tab 01</a>
        <div class="menu-sub">
          <ul>
            <li><a href="">Link 1</a></li>
            <li><a href="">Link 2</a></li>
            <li><a href="">Link 3</a></li>
            <li><a href="">Link 4</a></li>
            <li><a href="">Link 5</a></li>
          </ul>
        </div>
      </li>
      <li class="Tab2"><a href="">Tab 02</a>
        <div class="menu-mega">
          <div>
            <h3>Category</h3>
            <ul>
              <li><a href="">Link 1</a></li>
              <li><a href="">Link 2</a></li>
              <li><a href="">Link 3</a></li>
              <li><a href="">Link 4</a></li>
              <li><a href="">Link 5</a></li>
            </ul>
          </div>
          <div>
            <h3>Category</h3>
            <ul>
              <li><a href="">Link 1</a></li>
              <li><a href="">Link 2</a></li>
              <li><a href="">Link 3</a></li>
              <li><a href="">Link 4</a></li>
              <li><a href="">Link 5</a></li>
            </ul>
          </div>
          <div>
            <h3>Category</h3>
            <ul>
              <li><a href="">Link 1</a></li>
              <li><a href="">Link 2</a></li>
              <li><a href="">Link 3</a></li>
              <li><a href="">Link 4</a></li>
              <li><a href="">Link 5</a></li>
            </ul>
          </div>
        </div>
      </li>
      <li class="Tab2"><a href="">Tab 03</a>
        <div class="menu-mega">
          <div>
            <h3>Category</h3>
            <ul>
              <li><a href="">Link 1</a></li>
              <li><a href="">Link 2</a></li>
              <li><a href="">Link 3</a></li>
              <li><a href="">Link 4</a></li>
              <li><a href="">Link 5</a></li>
            </ul>
          </div>
          <div>
            <h3>Category</h3>
            <div class="multi">
              <ul>
                <li><a href="">Link 1</a></li>
                <li><a href="">Link 2</a></li>
                <li><a href="">Link 3</a></li>
                <li><a href="">Link 4</a></li>
                <li><a href="">Link 5</a></li>
              </ul>
              <ul>
                <li><a href="">Link 1</a></li>
                <li><a href="">Link 2</a></li>
                <li><a href="">Link 3</a></li>
                <li><a href="">Link 4</a></li>
                <li><a href="">Link 5</a></li>
              </ul>
            </div>
          </div>
        </div>
      </li>
      <li><a href="">Tab 04</a></li>
    </ul>
  </div>
</nav>