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.