-1

I have a four level menu, and on level3 and level4 I want to use 4 columns. When the first column height is reached from level4 items, elements show on the next column.

<pre>
https://jsfiddle.net/nbastreet/Lc9w2nqk/5/
</pre>

I tried to use flex display to no avail.

Gorgamite
  • 227
  • 2
  • 13
Ali
  • 135
  • 10

1 Answers1

0

Its simple. You just need to add the column-count property to your menu-items container (<ul>)

<ul class="column">
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ul>

.column {
  column-count: 3;
}

Here is an example https://codepen.io/kaiten/pen/ddrvMj

You can learn more about column properties here

shoxton
  • 66
  • 10
  • Check the top of the css, ive included a class called `.column` on your level 2 menu, and defined the property called `column-count` with the value setted to 3 https://jsfiddle.net/Lc9w2nqk/13/ – shoxton Mar 02 '18 at 00:20
  • but it does't work and level4 items still is out of container! – Ali Mar 02 '18 at 00:24
  • are you watching the same jsfiddle as i am? https://jsfiddle.net/Lc9w2nqk/13/ for me it works fine, if you want the effect to be aplied on other items, just add the same property for the items container – shoxton Mar 02 '18 at 00:28