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>Fruit and lots of fruit
                    <li>Granny Smith

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>