如何排列一系列列表，使它们彼此堆叠？

Question

这就是我所拥有的：

这就是我想要的：

我无法轻松更改DOM结构，因为我正在使用通过创建新菜单生成的WordPress列表。我尝试了Flexbox和grid等其他技术，但似乎无法获得想要的结果。如果有人可以在这里帮助我，我会喜欢的。谢谢。

https://codepen.io/WayneHaworth/pen/BGzzpr

<div class="container">
<ul id="main-menu">
  <li>
    <span>List 1</span>
    <ul class="inner-list">
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
      <li>item 4</li>
      <li>item 5</li>
      <li>item 6</li>
      <li>item 7</li>
    </ul>
  </li>
  <li>
    <span>List 2</span>
    <ul class="inner-list">
      <li>item 1</li>
      <li>item 2</li>
    </ul>    
  </li>
  ...etc

</ul>
</div>

Answer 1

根据@Doug的评论，在UL外部添加CSS列来解决此问题。

-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 5;