Multi-level dropdown

HTML

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

CSS

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}


/*------------------------------------*\
    $HOUSEKEEPING
\*------------------------------------*/
*{ margin:0; padding:0; }
html{
    padding:5%;
    font:1em/1.5 Georgia, serif;
    overflow-y:scroll;    
}
ul{
    margin-bottom:1.5em;
    margin-left:1.5em;
}
a{
    text-decoration:none;
}

.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;
    }

.flyout,
.flyout-alt{
    position:relative;
}
    .flyout-content{
        /* Position the flyouts off-screen. This is typically better than `display:none;`. */
        position:absolute;
        top:100%;
        left:-99999px;
        /**
         * Even though they are out of document flow, lots of nested flyouts can
         * eventually force scroll bars to appear as they become taller than the viewport.
         * We can undo this effect by giving them zero height.
         */
        height:0;
        overflow:hidden;
    }
    
    /**
     * Bring the flyouts into view when you hover their parents.
     * Two different types of flyout; ‘regular’ (`.flyout`) and ‘alternative’ (`.flyout-alt`).
     */
    /* Regular flyouts sit all the way from the top, flush left. */
    .flyout:hover > .flyout-content{
        left:0;
    }
    /* Alternative flyouts sit all the way from the left, flush top. */
    .flyout-alt:hover > .flyout-content{
        top:0;
        left:100%;
    }
    .flyout:hover > .flyout-content,
    .flyout-alt:hover > .flyout-content{
        /* Give the flyouts their height back once they come into view. */
        height:auto;
       ...