css3 multilevel navigation with certain layout

Question

i've been searching the web desperately for a pure css3 menu with the following layout:

any ideas? thanks

Answer 1

You need to use nested <ul>s and <li>s. To make the menu expand when you hover over it (which I'm assuming is what you want) you start out with your second and third level uls hidden (display:none), then only reveal them when their parent li is hovered over (li:hover>ul { display:block; }).

All in all, it will look something like this:

HTML:

<nav>
    <ul class='level0'>
        <li><a href='#'>ITEM1</a>
            <ul class='level1'>
                <li><a href='#'>Level1 - Item1</a>
                    <ul class='level2'>
                        <li><a href='#'>Level2 - Item1</a></li>
                        <li><a href='#'>Level2 - Item2</a></li>
                        <li><a href='#'>Level2 - Item3</a></li>
                        <li><a href='#'>Level2 - Item4</a></li>
                    </ul>
                </li>

                <!-- more li's -->

            </ul>
        </li>

        <!-- more li's -->

    </ul>
</nav>

CSS:

nav {
    position:absolute;
}

.level0,
.level1,
.level2 {
    width:270px;
    padding:0;
    margin:0;
    position:absolute;
    top:0;
    list-style:none;
}

.level1,
.level2 {
    left:270px;
    display:none;
}

.level0 {
    left:0px;
}

.level0 {
    background:#fafafa;
}

.level0 li:hover {
    background:#ddd;
    color:#f00;
}

.level1 {
    background:#ddd;
}

.level1 li:hover {
    background:#bbb;
    color:#f00;
}

.level2 {
    background:#bbb;
}

.level2 li:hover {
    background:#a2a2a2;
    color:#f00;
}

nav li {
    display:block;
    font-weight:normal;
    font-family:sans-serif;
    font-size:13px;
    color:#000;
}

li:hover>ul {
    display:block;
}

li a {
    display:block;
    padding:12px;
    color:inherit;
    text-decoration:none;
}

I also made a JSFiddle so you can see it in action: http://jsfiddle.net/vj2vh/