Question

I have this: http://jsfiddle.net/bnNSW/
I want a functional navigation menu. How?

1. On click background must animate to bottom in order to select and link to a page. At the same time another selected tabs must animate to top.
2. On hover background must show just the tip to demostrate user all tabs are selectable.

Code?

UPDATE: This is the site i’m working on http://www.accastelli.com.ar/

Answer 1

See the demo

$("#nav li a").hover(
function () {
    //$("#nav li a li").css({'background-position-y':'-102px'});
    if( $(this).parent('li').not('select') ){
        $(this).parent('li').animate({'background-position-y':'-82px'},300);
    }
},
function () {
    if( $(this).parent('li').not('select') ){
        $(this).parent('li').animate({'background-position-y':'-102px'},300);
    }
}
);

$('#nav li a').click(function(e){
    e.preventDefault();
    e.stopPropagation();
    $('#nav li').animate({'background-position-y':'-102px'},300,function(){ $('#nav li').removeClass('select');});

      $(this).parent('li').animate({'background-position-y':'0'},300,function(){$(this).addClass('select')});
});