Menu TopDown

Olá, gente! Tudo bom? Eu espero que sim. Primeiramente, eu queria pedir desculpas. Meu dia anda muito corrido, e eu mal consigo tempo para postar. Espero que você tenham curtido o novo layout.
Bom, hoje vou ensinar como fazer este menu.
Quero lembrar que você não vai encontrar em nenhum outro blog esse tutorial, pois eu adaptei um tutorial para t u m b l r. Então, o código ficou bem exclusivo. Vamos conferir?

Primeiro, quero dar créditos ao tumblr HTML Art, pois o código é de lá. Bora começar:
Vá em: Modelo>>Editar HTML>>Proseguir>>F3 ou Ctrl F.
Agora, você vai procurar por:

]]></b:skin>

Antes de ]]></b:skin> cole: (Ps: Não personalize agora, personalize depois)

#top
position: fixed; /* Troque por Absolute se não quiser que ela role com a página */margin-top:-160px; /* Aumente o número para o menu "subir" */
width:80px;
height:180px;
margin-left:100px; /* Quanto mais você aumenta, mais para a direita vai. Se quiser que vá para a esquerda, deixe o número em negativo */
background: #e7acbd; /* Fundo geral */
color: #fff; /* Cor do nome do menu */
text-shadow: 1px 1px 0px #de8ea5; /* sombra */
box-shadow: 0px 3px 0px #de8ea5; /* sombra */
padding:10px;
-webkit-transition-duration: .90s;
-moz-transition-duration: .90s;
transition-duration: .90s;
-webkit-border-bottom-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-bottomleft: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;}

#top:hover{ /* Hover do menu */
margin-top:-10px; /* Aumente o número para o menu "subir" quando aberto */
-webkit-transition-duration: .90s;
-moz-transition-duration: .90s;
transition-duration: .90s;}
.letra{
font-family:'Dosis';
font-size:30px;
text-transform: uppercase; /* Troque por Capitalize se quiser normal */
text-align: center;}
.nav{padding: 4px 8px 4px 8px;
background:#d6718e;
font-family:'Advent Pro';
font-size:13px;
text-shadow: 1px 1px 0px #cd5376;
margin-top:4px;
margin-bottom:4px;
text-align: center;
text-transform: uppercase;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;}
.nav:hover{background:#d97a95;}
.nav a{color:#fff;}

Procure agora por  </head> e cole acima dele:

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

Então, procure por <header> , e acima dele cole:

<div id="top">
<div class="nav"><a href="link">Home</a></div>
<div class="nav"><a href="link">About</a></div>
<div class="nav"><a href="link">Texts</a></div>
<div class="nav"><a href="link">Flickr</a></div>
<div class="nav"><a href="link">Portfolio</a></div>
<div class="letra">Menu</div>
</div>

Agora, é só voltar no ]]></b:skin> e fazer a personalização. Prontinho, seu menu está finalizado!

Tutorial de TUMBLR adaptado por mim. Não reblog, mesmo com créditos!