aj hover navigation

by Umar

HTML

<link href="http://fonts.googleapis.com/css?family=Coustard" rel="stylesheet" type="text/css"> 

<div id="wrapper">
    
    <a id="cat_nav">categories</a>
    
        <ul id="nav">
            <li><a href="#">landscape</a></li>
            <li><a href="#">people</a></li>
            <li><a href="#">random</a></li>
            <li><a href="#">sports</a></li>
        </ul>
</div>

CSS

body {
    font-family: 'Coustard';
    letter-spacing: 0px;
}

#wrapper {
    width: 250px;   
}

#nav {
    background: #2d2d2d;
    color: #e8e8e8;
    width:220px;
    padding: 10px 15px 10px 15px;
    display: none;
    border-radius:2px;
}

#cat_nav {
    background: #2d2d2d;
    color: #e8e8e8;
    margin-bottom:12px;
    width: 220px;
    height: 20px;
    padding: 10px 15px 10px 15px;
    border-radius:2px;
    cursor:pointer;
}

a {
    color: #e8e8e8;
    text-decoration:none;
    display: block;
}

a:hover {
    color: #6bc99e;
}

li {
    line-height:40px;
    border-bottom:1px solid #444;
}

JavaScript

var $nav = $('#nav'),
    $catNav = $('#cat_nav');

$('#wrapper').hover(
    function() {
        $nav.stop(true, true).slideDown(300);
        $catNav.css({
            backgroundColor: '#6bc99e',
            color: '#2d2d2d',
        });
    }, function() {
        $nav.stop(true, true).slideUp(300);
        $catNav.css({
            backgroundColor: '#2d2d2d',
            color: '#e8e8e8',
        });
});

// removes border bottom from last list element
$("ul li:last-child").css({
    border: 'none'
});