Multi-level dropdown

Original: http://jsfiddle.net/csswizardry/Zj4eb/

by Jens Grochtdreis

HTML

<ul class="nav site-nav">
    <li><a href=#>Lorem</a></li><!--
 --><li><a href=#>Ipsum</a></li><!--
 --><li class=flyout>
        <a href=#>Dolor</a>
        <ul class="flyout-content nav stacked">
            <li><a href=#>Foo Bar</a></li>
            <li><a href=#>Bar Baz</a></li>
            <li class="flyout-alt">
                <a href=#>Baz Foo</a>
                <ul class="flyout-content nav stacked">
                    <li><a href=#>Foo Bar</a></li>
                    <li><a href=#>Bar Baz</a></li>
                    <li class="flyout-alt">
                        <a href=#>Baz Foo</a>
                        <ul class="flyout-content nav stacked">
                            <li><a href=#>Foo Bar</a></li>
                            <li><a href=#>Bar Baz</a></li>
                            <li><a href=#>Baz Foo</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </li><!--
 --><li><a href=#>Sit</a></li><!--
 --><li><a href=#>Amet</a></li>
</ul>

<ul class="nav stacked">
    <li><a href=#>Lorem</a></li>
    <li><a href=#>Ipsum</a></li>
    <li><a href=#>Dolor</a></li>
    <li><a href=#>Sit</a></li>
    <li><a href=#>Amet</a></li>
</ul>

CSS

/* Housekeeping */
*{ margin:0; padding:0; }
html{
    padding:5%;
    font:1em/1.5 Georgia, serif;
}
ul{
    margin-bottom:1.5em;
    margin-left:1.5em;
}
a{
    text-decoration:none;
}

/* The nav abstraction */
.nav{
    list-style:none;
    margin-left:0;
}
    .nav > li,
        .nav > li > a{
            display:inline-block;
            *display:inline;
            zoom:1;
        }

    .stacked > li{
        display:list-item;
    }
        .stacked > li > a{
            display:block;
    }

/* Flyouts */
.flyout,
.flyout-alt{
    position:relative;
}
    .flyout-content{
        position:absolute;
        top:100%;
        left:-99999px;
    }
    .flyout:hover > .flyout-content{
        left:0;
    }

    .flyout-alt > .flyout-content{
        top:0;
        left:-99999px;
    }
    .flyout-alt:hover > .flyout-content{
        top:0;
        left:100%;
    }

/* Site nav */
.site-nav{
    font-size:0.75em;
    font-family:sans-serif;
}
        .site-nav a{
            padding:0.5em;
            background-color:#09f;
            color:#fff;
            white-space:nowrap;
        }

/* Site nav flyouts */
.site-nav .flyout:hover > a,
.site-nav .flyout-alt:hover > a,
.site-nav a:hover{
    background-color:#BADA55;
    text-decoration:underline;
}

.site-nav a,
.site-nav .flyout-content{
    border:0 solid #fff;
}
.site-nav > li > a{
    border-left-width:1px;
}
.site-nav > li:first-child > a{
    border:none;
}
.site-nav .flyout-content{
    border-width:1px 0 0 1px;
}
.site-nav .flyout-content a{
    border-bottom-width:1px;
}