[Pedido] Menu deslizante a hover ;3

Hóyy gente u_u <3 então vocês já viram o projeto do blog né? então participem aqui eu vou divulgar bastante u-u convenhamos, vamos para o post. Bem acho que pelo titulo já sabem do que se trata, foi um pedido da Ask, um pedido Anonimo '-' mas estou atendendo, é o menu deslizante a hover, quem chegou a ver o lay antigo, eu usava esse menu, e ele é mais ou menos assim:

Curtiu, quem aprender a fazer? continue lendo

Então vá no seu HTML (avah) e procure por:

]]></b:skin>

/* Aqui definimos as propriedades CSS para a lista do menu */ ul#navigation { position: fixed; margin: 0px; padding: 0px; top: 0px; right: 10px; list-style: none; z-index:999999; width:721px; } ul#navigation li { width: 103px; display:inline; float:left; } ul#navigation li a { display: block; float:left; margin-top: -2px; width: 100px; height: 25px; background-color:#E7F2F9; /*---cor de fundo---*/ background-repeat:no-repeat; background-position:50% 10px; border:1px solid #BDDCEF; /*---cor da borda---*/ -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-bottom-left-radius: 10px; -khtml-border-bottom-right-radius: 10px; -khtml-border-bottom-left-radius: 10px; text-decoration:none; text-align:center; padding-top:80px; opacity: 0.7; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70); } ul#navigation li a:hover{ background-color:#CAE3F2; opacity: 1; filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); } ul#navigation li a span{ letter-spacing:2px; font-size:11px; color:#60ACD8; /*---cor do link---*/ text-shadow: 0 -1px 1px #fff; } /* Aqui definimos as imagens de fundo para os links dos itens da lista do menu*/ ul#navigation .home a{ background-image: url(http://1.bp.blogspot.com/-8kXTrCSJ6TI/T7PpNQtumCI/AAAAAAAAAF4/TfFELS_TSJk/s1600/home%2B%25281%2529.png); } ul#navigation .sobre a { background-image: url(http://2.bp.blogspot.com/-8b0NOVUuGpQ/T7PpNqWONsI/AAAAAAAAAGE/ncafVsfgxg8/s1600/id_card%2B%25281%2529.png); } ul#navigation .contato a { background-image: url(http://2.bp.blogspot.com/-tmsZ5WfQVy0/T7Pp1sJqh2I/AAAAAAAAAGo/tO5AWC7Xb48/s1600/mail%2B%25281%2529.png); } ul#navigation .feedrss a { background-image: url(http://1.bp.blogspot.com/-jMeVHtFdzbc/T7Pp1Qq2rtI/AAAAAAAAAGc/HaGlP612qSE/s1600/rss%2B%25281%2529.png); } ul#navigation .imagens a { background-image: url(http://3.bp.blogspot.com/-WWPgJGVlBZU/T7PpNy2-9fI/AAAAAAAAAGQ/Z2aP6VN4SKA/s1600/images.png); }

 Altere o 
"http://3.bp ..." = url da imagem que vai aparecer.
E o resto está especificado no código.

Ainda não acabou agora vá em </head>

Cole isso ACIMA da tag

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
$(function() {
    var d=300;
    $(&#39;#navigation a&#39;).each(function(){
        $(this).stop().animate({
            &#39;marginTop&#39;:&#39;-80px&#39;
        },d+=150);    });
    $(&#39;#navigation &gt; li&#39;).hover(
    function () {
        $(&#39;a&#39;,$(this)).stop().animate({
            &#39;marginTop&#39;:&#39;-2px&#39;
        },200);    },    function () {
        $(&#39;a&#39;,$(this)).stop().animate({
            &#39;marginTop&#39;:&#39;-80px&#39;
        },200);    });});</script>

Não mude NADA

Agora vam em <header> e cole Acima da tag isso

<ul id='navigation'>
 <li class='home'><a href='URL-AQUI'><span>Nome da Pagina</span></a></li>
 <li class='sobre'><a href='URL-AQUI'><span>Nome da Pagina</span></a></li>
 <li class='contato'><a href='URL-AQUI'><span>Nome da Pagina</span></a></li>
 <li class='feedrss'><a href='URL-AQUI'><span>Nome da Pagina</span></a></li>
 <li class='imagens'><a href='URL-AQUI'><span>Nome da Pagina</span></a></li>
</ul>

URL-AQUI = Url da página
Nome da página = Nome da página (não me diga)

Visualize se estiver tudo certo salve! joinha?

Imagens para usar... procurem no Tumblr u_u eu Juro que vocês acham, ou façam as próprias imagens XP Se quisere algo especifico peçam na ask.

Crédito a : If I Ruled The World