在中心菜单下左对齐

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