Menu Fluid

Hi guys, hoje trouxe um menu mega lindinho para vocês! Ele é simples porém acho que fica ótimo no topo do cabeçalho.

Achei esse menu no blog Senhorita Independência, portanto, créditos à ele e, aqui tem uma preview do menu.

Bem, primeiramente vá até o HTML do seu blog e procure por </head>. Após achar a tag, cole o seguinte código acima dela:

<script src="http://static.tumblr.com/03fwsqk/gM4m4lzm0/menu_jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#menufluid li').click(function()
{
  var url = $(this).find('a').attr('href');
  document.location.href = url;
});
$('#menufluid li').hover(function()
{
   $(this).find('.fluid').slideDown();
},
function()
{
  $(this).find('.fluid').slideUp();
});
});
</script>

Agora, procure por ]]></b:skin> e depois de achar cole o seguinte código acima dessa tag fazendo as devidas alterações (aqui tem uma tabela de cores para ajudar):

@font-face {font-family: "Alterebro Pixel Font"; src: url('http://static.tumblr.com/rzkfpnf/WFNm33qbe/font.ttf');}
#menudisplay ul{list-style-type:none; display:block;}
#menufluid li{font-family: 'Yanone Kaffeesatz', sans-serif; font-size: 22px; background: #COR_DO_BACKGROUND; float:left; padding: 0px 0 5px 0; height:22px; width: 80px; text-align: center; margin: 5px; border-radius: 5px; text-transform: uppercase;}
#menufluid li a{color:#COR_DA_FONTE; text-decoration:none; list-style-type: none;}
.fluid {cursor:hand; background: #COR_DO_BACKGROUND; color:#COR_DA_FONTE; width:70px; font-family: Alterebro Pixel Font; font-size:8px; height:15px; vertical-align: middle; text-align: center; text-transform: uppercase; padding:5px; display:none; position:absolute; margin-left: 0px; margin-top:-25px; border-radius: 5px;}</center>

Por fim, salve seu HTML e vá para o seu layout. Lá, adicione um gadget HTML/JavaScript, nele cole o seguinte código e salve:

<div id="menudisplay">
<ul id="menufluid">
<li><a href="#">link</a><div class="fluid">descricao do link</div></li>
<li><a href="#">link</a><div class="fluid">descricao do link</div></li>
<li><a href="#">link</a><div class="fluid">descricao do link</div></li>
</ul>
</div>