Меню анимации JQuery вниз

Question

Я работаю над css jquery menu. У меня есть код http://jsfiddle.net/A6rUG/, и я пытаюсь анимировать вниз, а не вверх. Код вар SlideNav = (функция() {

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 }); 
    }); 

})(); 

Изменение MarginTop или MarginBottom, кажется, не сделать трюк. Знает ли кто-то, что будет?

Answer 1

Это должно сделать трюк:.

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 }); 
    }); 

})(); 

и 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" 

Но вы должны изменить другой код, чтобы поставить ссылку парения BEFORE фактического <a> в DOM, а не после того, как