sliding the text up and background down on mouseover event

Question

I have a small problem with sliding function. What I want it to do is when I mouseover the button, the darker background will slide down covering the whole button (behind the text) and text will slide up a little bit. What I have done so far is this:

<nav>
    <a href="../webdesign.html"><span>01. <strong>HOME</strong></span><div></div></a>
    <a href="../webdesign.html"><span>02. <strong>WEBSITE DESIGN</strong></span><div></div></a>
    <a href="../webdesign.html"><span>03. <strong>MOBILE WEBSITES</strong></span><div></div></a>
    <a href="../webdesign.html"><span>04. <strong>PORTFOLIO</strong></span><div></div></a>
    <a href="../webdesign.html"><span>05. <strong>ABOUT US</strong></span><div></div></a>
    <a href="../webdesign.html"><span>06. <strong>CONTACT US</strong></span><div></div></a>
</nav>

jquery:

$("nav a").mouseenter(function(){
      $('div', this).slideDown(200);
      $("nav a").css('padding-top', '5px');
}).mouseleave(function() {
      $('div', this).slideUp(500);
      $("nav a").css('padding-top', '25px');
});

css:

    nav{
        height:65px;
        font-family: moderne, Verdana, Geneva, sans-serif;
        font-size:0.9em;
        overflow:hidden;
    }

    nav a{
        background-color:rgba(000,000,000,0.1);
        border-bottom:1px solid #fff;
        border-top:1px solid #666;
        display:block;
        float:left;
        padding: 25px 0 0 10px;
        width: 144px;
        height:65px;
        color:#ffd100;
        font-size: 1em;
        margin: 0 2px;
        border-right: solid 1px #fff;
        border-left: solid 1px #666;
        -webkit-box-shadow: rgba(0,0,0,0.4) 1px 1px 3px inset;
        -moz-box-shadow: rgba(0,0,0,0.4) 1px 1px 3px inset;
        box-shadow: rgba(0,0,0,0.4) 1px 1px 3px inset;
        position:relative;
    }

    nav a strong{
        font-weight:normal;
        color:#333;
    }

    nav div{
        position:absolute;
        top:0;
        left:0;
        float:left;
        width:144px;
        background-color: rgba(0, 0, 0, .5);
        color:#ddd;
        padding:5px;
        margin-top: 0px;
        border-bottom:1px solid #999;
        font-size:15px; 
        display:none;
    }

I know jquery is a bit of disaster, but I tried many things, I'm a beginner in jquery. jsFiddle here: jsFiddle Thank you for your help.

Answer 1

See this: http://jsfiddle.net/bFFhk/2/

$("nav a").mouseenter(function () {
    $('div', this).slideDown(200);
    $(this).css('padding-top', '5px');
}).mouseleave(function () {
    $('div', this).slideUp(500);
    $(this).css('padding-top', '25px');
});

This adds a little animation : http://jsfiddle.net/bFFhk/3/