Html 在居中菜单下左对齐

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

但是现在，当我有一个居中的主列表点（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，并将

列表样式：none

添加到类

.main菜单ul>li

CSS

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

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