Jquery Animate menu down

Question

I am working on a css jquery menu. I have a code like this http://jsfiddle.net/A6rUG/ and am trying to animate down instead of up. The code is var slideNav = (function() {

    var spanHeight,
        nav = $('#nav'),
        lis = $('li', nav),
        anchors = $('a', lis).css('padding', 0);

    $.each(anchors, function() {
        var a = $(this),
            val = a.text();

        a.html('<span>' + val + '</span> <span>' + val + '</span>')
         .parent('li')
            .height(a.children('span:first').outerHeight())
         .end()
         .children('span:first')
            .css('marginTop', 0) // strange for IE
    });

    spanHeight = lis.eq(0).height();

    lis.hover(function() {
        $(this).find('span:first').animate({
            marginTop : -56
        }, { duration: 200, queue : false });
            }, function() {
        $(this).find('span:first').animate({
            marginTop : 0
        }, { duration: 200, queue: false });
    });

})();

Changing marginTop or marginBottom doesn't seem to do the trick. Does somebody know what would?

Answer 1

This should do the trick:

var slideNav = (function() {

    var spanHeight,
        nav = $('#nav'),
        lis = $('li', nav),
        anchors = $('a', lis).css('padding', 0);

    $.each(anchors, function() {
        var a = $(this),
            val = a.text();

        a.html('<span>' + val + '</span> <span>' + val + '</span>')
         .parent('li')
            .height(a.children('span:first').outerHeight())
         .end()
         .children('span:first')
            .css('marginTop', -56) // strange for IE
    });

    spanHeight = lis.eq(0).height();

    lis.hover(function() {
        $(this).find('span:first').animate({
            marginTop : 0
        }, { duration: 200, queue : false });
            }, function() {
        $(this).find('span:first').animate({
            marginTop : -56
        }, { duration: 200, queue: false });
    });

})();

and CSS:

body {
     text-align: center;
     background: #676767;
     font-family: helvetica;
    }

    ul, li {
     margin: 0; padding: 0;
     overflow: hidden;
    }

    ul li {
     float: left;
     list-style: none;
     margin-right: 1em; 
     position: relative; /* IE fix */
    }

    li a {
     color: white;
     text-decoration: none;
     float: left;
     font-size: 30px;
     background: black;
     padding: 10px;
    }

    li a:hover {
     background: #ff0;
    color:white;
    }

    /* if JS */

    li a span {
        display: block;
        background: white;
        color: maroon;
        padding: 10px;
        position: relative;
        font-weight: bold;
    }

    li a span:last-child {
        background: black;
        color: white;
    }

Answer 2

marginTop : "56px"

But you have to change the other code to put the hover link BEFORE the actual <a> in the DOM, not after.