Simple Drop Down

an attempt to a simple dropdown

by hdesigns

HTML

<ul class="dropdown">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">About</a>
        <ul>
            <li><a href="#">dropdown 1</a></li>
            <li><a href="#">dropdown 2</a></li>
            <li><a href="#">dropdown 3</a></li>
        </ul>
    </li>
    <li><a href="#">Works</a></li>
    <li>
        <a  href="#">Folio</a>
        <ul>
            <li><a href="#">dropdown 1</a></li>
            <li><a href="#">dropdown 2</a></li>
            <li><a href="#">dropdown 3</a></li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
</ul>

CSS

.dropdown{
    margin: 10px;
}

.dropdown li{
    background: #333;
    float: left;
    border-right: 1px solid #444;
    border-left: 1px solid #222;
    position: relative;
    color: #fff;
}

.dropdown li a{
    font-family: Tahoma;
    font-size: 13px;
    text-transform: uppercase;
    color: inherit;
    padding: 10px 20px;
    text-decoration: none;
    display: block;
}

.dropdown li:hover{background: #222}

.dropdown ul{
    position: absolute;
    padding: 0;
    border: 0;
    margin: 0;
    top: 36px; left: -1px;
    display: none;
}

.dropdown ul li{border: 0}

.dropdown ul li a{
    display: block;
    float: none;
    padding: 15px;
    color: #ccc;
    font-size: 11px;
    text-transform: uppercase;
    font-family: Tahoma;
    white-space: nowrap;
    background: #555;
    border: 0;
}

.dropdown ul li a:hover{
    background: #444;   
    color: white;
}

JavaScript

$('.dropdown li').hover(function() {
    $(this).find('ul').stop(true, true).slideToggle('fast');
});