css - 如何安排一系列列表，使它们相互堆叠？

Question

这就是我所拥有的：

这就是我想要的：

当我使用通过创建新菜单生成的 WordPress 列表时，我无法轻易更改 DOM 结构。我尝试了不同的技术，例如 Flexbox 和网格，但我似乎无法获得我想要的结果。如果有人可以在这里提供帮助，我会很高兴。谢谢你。

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>

标签： css

Answer 1

根据@Doug 的评论，向外部 UL 添加一个 CSS 列解决了这个问题。

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