Question

I am building a menu with css from a nested ordered list. What I am trying to achieve – without success yet – is that each nesting level is placed in a seperate row. I created a test case on codepen and I would appreciate any help solving this issue. Here’s the pen: http://codepen.io/peterschmidler/pen/CkzpF

Thanks a lot in advance!

Peter

Edit: Thanks for the hint to the correct nesting of the list. But I still could’t solve the main issue: How to render the list in seperate rows for each active level. I updated the code to clarify the issue: http://codepen.io/anon/pen/lzHda

I would highly appreciate any help, that solves the problem with pure CSS.

Thanks.

Answer 1

You did not nest your lists properly. <ol> can only contain <li>. You should put your nested <ol> inside an <li>. Something like this:

<ol>
 <li>main1</li>
 <li>main2
  <ol>
   <li>sub1</li>
   <li>sub2
     <ol>
       <li>subsub1</li>
     </ol>
   </li> <!-- closing sub 2 -->
   <li>sub3</li>
  </ol>
 </li> <!-- closing main 2 -->
 <li>main3</li>
</ol>

This shouild put you back on track…