html - 在居中菜单下左对齐

Question

我正在寻找一种解决方案，将子列表直接对齐到居中的要点下方。下面是一些图片，可以让您了解我想要实现的目标:

但是现在，当我有一个居中的主列表点 (LEISTUNGEN) 时，我无法将子列表放在我想要的位置。我可以将它居中:

主要问题是，主列表点的宽度是可变的，所以我不能只对子列表使用填充以将其放在 LEISTUNGEN 下。

有人知道可能的解决方案吗？

这是我的结构:

<ul class="mainmenu">
  <li><a href="#">Leistungen</a>
    <ul>
      <li><a href="#">mehr Leistungen</a>
      <li><a href="#">Leistungen 2</a>
      <li><a href="#">Und noch mehr davon</a>
    </ul>
  </li>
</ul>

到目前为止还有 CSS:

.mainmenu {
    width:100%;
    display:table;
    padding-top:12px;
}
.mainmenu > li {
    display: table-cell;
    text-align:center;
    padding-bottom: 7px;
}
.mainmenu > li > a {
    display:block;
    color: #636466;
    text-decoration:none;
    text-transform:uppercase;
}
.mainmenu ul {
    display:block;
    position:relative;
}
.mainmenu ul > li {
    position:relative;
}
.mainmenu ul > li > a {
    color:#1a4787;
    text-decoration:none;
}

Answer 1

使用以下内容更新您的 css，还将 list-style:none 包含到类 .mainmenu ul > li

CSS

.mainmenu ul{
    display:inline-block;
    text-align:left;
}

Fiddle Demo