1

I have HTML which looks something like this:

<nav class="subnav">
    <ul>
        <li><a href="">Level 1</a></li>
        <li><a href="">Level 1</a></li>
        <li>
            <a href="">Level 1</a>
            <ul>
                <li>
                    <a href="">Level 2</a>
                    <ul>
                        <li><a href="">Level 3</a></li>
                        <li><a href="">Level 3</a></li>
                        <li><a href="">Level 3</a></li>
                    </ul>
                </li>
                <li><a href="">Level 2</a></li>
                <li><a href="">Level 2</a></li>
            </ul>
        </li>
        <li><a href="">Level 1</a></li>
        <li><a href="">Level 1</a></li>
    </ul>
</nav>

I'm basically looking for a simple way to style it in CSS3 so that each sub-level shown as a separate column to the right (instead of being inserted and indented); something like this:

Level 1    |    Level2    >    Level3
Level 1    |    Level2    |    Level3
Level 1    >    Level2    |    Level3
Level 1    |              |
Level 1    |              |

Ideally, those columns should also have the following properties:

  • flexible width, so other content can be next to this; it should be aligned/floated left
  • any level of nesting, and any number of entries in each level
  • a common wrapper which expands with new levels an can be styled separately
  • each column should take 100% of the wrapper's height

Am I asking for too much? :-)

Improve this question
3
  • I think you're looking for something like this stackoverflow.com/questions/10477184/… Commented Dec 26, 2012 at 13:00
  • Have you looked at Son of Suckerfish? Commented Dec 27, 2012 at 16:51
  • Thanks for the suggestions, but no -- I think I wasn't quite clear. the thing is that I don't need the menus to pop open on hover or anything dynamic like that; I need them to be static, just showing submenus in columns while keeping the overall container (<nav> in this case) dynamic. I'll modify the question accordingly. Commented Dec 27, 2012 at 20:00
Related questions
0
HTML/CSS: column-like layout for list elements
4
Horizontal list with nested lists that display vertically
0
html nested lists
Load 7 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.