CSS only drop-down menus (with submenus)

Who needs JavaScript to do drop-down menus on a HTML web-page? Anyway, I gave it a try.

This does not work in IE6, since I’m using the child selector and the :hover pseudo class. Personally, I think that we should stop supporting IE6, so that we can all focus on other things.

I’m using a CSS IE hack below since IE doesn’t do inline-block on block elements.

With the following HTML:

<ul class="navbar">
    <li>Meat</li>
    <li>Vegetables</li>
    <li>Fruit and lots of fruit
        <ul>
            <li>Organge</li>
            <li>Apple
                <ul>
                    <li>Fuji</li>
                    <li>Gala</li>
                    <li>Granny Smith
                        <ul>
                            <li>Red</li>
                            <li>Green</li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>Pomgranade</li>
        </ul>
    </li>
</ul>

just add this CSS:

.navbar, .navbar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.navbar li {
    position: relative;
    padding: 0.5em;
    white-space: nowrap;
}

.navbar > li {
    display: inline-block;
    zoom: 1;
    *display: inline; 
}

.navbar ul {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
}

.navbar li:hover > ul {
    display: block;
}

.navbar ul ul {
    left: 100%;
    top: 0;
}

If you put it all together, this is what it looks like, with a tiny theme added:

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>