Bare Bones CSS-based Drop-down

by Drath

HTML

<ul id="nav">
    <li><a href="#">Test</a></li>
    <li><a href="#">Test Dropdown</a>
        <ul>   
            <li><a href="#">Test Drop</a></li>
            <li><a href="#">Test Dropdown #2</a>
                <ul>
                    <li><a href="#">Test Drop</a></li>
                    <li><a href="#">Test Drop</a></li>
                    <li><a href="#">Test Drop</a></li>
                </ul>
            </li>        
            <li><a href="#">Test Drop</a></li>
        </ul>
    </li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
</ul>

CSS

body { margin: 25px; }

#nav, #nav li {
    list-style:none;
    display:inline;    
}

#nav ul {
    display:none;    
}

#nav li:hover > ul {
    display: block;
    position: absolute;
    margin-top: -2px;  
}