Multi-level dropdown

by jitendravyas

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>
        
        <!-- Flyout -->
        <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>
                
                <!-- Flyout -->
                <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>
                        
                        <!-- Flyout -->
                        <ul class="flyout-content nav stacked">
                            <li class="flyout-alt">
                                
                                <a href=#>Foo Bar</a>
                                
                                <!-- Flyout -->
                                <ul class="flyout-content nav stacked">
                                    <li><a href=#>Bar Baz</a></li>
                                    <li class="flyout-alt">
                                        
                                        <a href=#>Baz Foo</a>
                                        
                                        <!-- Flyout -->
                                        <ul class="flyout-content nav stacked">
                                            <li><a href=#>Bar Baz</a></li>
                                            <li><a href=#>Baz Foo</a></li>
                                            <li><a href=#>Foo Bar</a></li>
                                        </ul>
                                    
                                    </li>
                                    <li><a href=#>Foo Bar</a></li>
                 ...

CSS

/*------------------------------------*\
    $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
\*------------------------------------*/
/**
 * Throw any `ul` or `ol` into horizontal mode, as per csswizardry.com/2011/09/the-nav-abstraction.
   <ul class=nav>
       <li><a href=/>Home</a></li>
       <li><a href=/about>About</a></li>
       <li><a href=/portfolio>Portfolio</a></li>
       <li><a href=/contact>Contact</a></li>
   </ul>
 */
.nav{
    list-style:none;
    margin-left:0;
}
    .nav > li,
        .nav > li > a{
            display:inline-block;
           *display:inline;
            zoom:1;
        }
    
    /**
     * Create a vertically stacked nav by extending `.nav` with `.stacked`.
       <ul class="nav stacked">
           <li><a href=/>Home</a></li>
           <li><a href=/about>About</a></li>
           <li><a href=/portfolio>Portfolio</a></li>
           <li><a href=/contact>Contact</a></li>
       </ul>
     */
    .stacked > li{
        display:list-item;
    }
        .stacked > li > a{
            display:block;
    }





/*------------------------------------*\
    $FLYOUT
\*------------------------------------*/
/**
 * Flyouts are pieces of content that fly out of a parent when said parent is hovered.
 * They typically appear bottom-left of the parent.
   <div class=flyout>
       Foo
       <div class=flyout-content>
           <h1>Lorem</h1>
           <p>Ipsum</p>
       </div>
   </div>
 */
.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...

JavaScript

/**
 * Infinitely nestable dropdown menu by @csswizardry
 * twitter.com/csswizardry
 */