jquery nav animate height

HTML

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

CSS

ul {
    list-style: none;
}
li {
}
a {
    background: #000;
    color: #fff;
    display: block;
    float: left;
    padding: 10px;
    position: relative;
}

JavaScript

$(document).ready(function() {
    $("a").hover(

    function() {
        $(this).animate({
            height: '+=10px',
            
        }), $(this).animate({
            height: '-=10px',
           
        });
    });

});