How can I arrange a series of lists so they stack on top of each other?

Question

This is what I have:

And this is what I want:

I cannot easily change the DOM structure as I am working with a WordPress list generated via creating a new menu. I have tried different techniques such as Flexbox and grid but I just cannot seem to get the results I am after. I'd love it if someone could help here. Thank you.

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>

This may help: https://stackoverflow.com/questions/24871693/bootstrap-writing-in-columns-like-a-newspaper - you may not be able to preserve the elements as a list, but you can create unique styles to carry on the same look & feel with a column layout (trial and error to test the limitations). Also, the CSS columns appear to have pretty decent support: https://caniuse.com/#feat=multicolumn — Doug, Nov 09 '18 at 14:08

score 0 · Answer 1 · answered Nov 09 '18 at 17:28

0

As per @Doug's comment, adding a CSS column to the outside UL fixed this.

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

answered Nov 09 '18 at 17:28

SmokingKipper

125
2
4
9

How can I arrange a series of lists so they stack on top of each other?

1 Answers1