0

I'm a bit stumped. I'm trying to create a simple menu structure using parent/child un-ordered lists. I've run into a road block trying to figure out the css needed to achieve the menu display listed in the image below: simple ul menu structure Here is an example html menu structure

<div class="container-div">
<ul class="level1">
  <li>Item
    <ul class="level2">
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>  
  </li>
  <li>Item
    <ul class="level2">
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </li>
  <li>Item
    <ul class="level2">
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </li>
  <li>Item
    <ul class="level2">
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </li>
  <li>Item
    <ul class="level2">
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </li>
  <li>Item
    <ul class="level2">
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
      <li>Item</li>
    </ul>
  </li>
</ul>  
</div>

As you can see the level 1 <ul> has 6 <li> items of varying heights depending on the contents on the level 2 <ul>.

For some reason, I'm completely drawing a blank on how to achieve this display effect with css. display:inline-block; won't work, as <li> numbers 5 and 6 would just display on a new line, with lots of empty space below <li> 2, 3, and 4.

Alex Ritter
  • 1,009
  • 3
  • 18
  • 40
  • Might be helpful: http://stackoverflow.com/questions/12332528/how-to-display-list-items-as-columns – Ben Y Nov 02 '15 at 18:07
  • I think the only way to achieve this effect in pure CSS is to use CSS columns. You might need to use a JavaScript masonry library. – jeffjenx Nov 02 '15 at 18:08
  • Thanks guys. This is exactly what I was looking for. No wonder my brain couldn't come up with the standard css :) – Alex Ritter Nov 02 '15 at 18:18

0 Answers0