O efeito é este (clique aqui)!
Para fazer, é simples:
1. Cole o código abaixo inteiro antes da tag </head>:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/8yo5xxv/AEwm171ey/jquery.lettering.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/8yo5xxv/rejm171fx/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/8yo5xxv/2rOm171gi/jquery.hoverwords.js"></script>
<script type="text/javascript">
$(window).load(function(){
$('#sl_menu').find('li:not(:last) > a')
.hoverwords({ overlay:true })
.end()
.find('li:last > a')
.hoverwords({ overlay:true , dir:'rightleft' });
$('#example1').hoverwords({ delay:50 });
$('#example2').hoverwords();
$('#example3').hoverwords();
$('#example4').hoverwords({ overlay:true});
$('#example5').hoverwords({ delay:60 });
});
</script>
2. Agora, cole isso no seu CSS:
/* --- Menu ------ */
.sl_menu{margin: 20px 0px 0px 0px; list-style:none; position: absolute; cursor: pointer;}
.sl_menu li,.sl_examples{float:left; font-family: 'Yanone Kaffeesatz', arial, serif; font-size: 27px; color: #b183a5; text-transform:uppercase; display: inline-block; padding: 4px; line-height: 40px;}
.sl_menu a,.sl_examples a{display:block; position:relative; float:left; color: #ffffff;}
.sl_menu a > span,.sl_examples a > span{height: 40px; float:left; position:relative; overflow:hidden;}
.sl_menu a span span,.sl_examples a span span{position:absolute; display: block; left: 0px;
top: 0px; text-align:center;}
.sl_menu a span span.sl-w1,.sl_examples a span span.sl-w1{text-shadow: 0px 2px 0px #;
text-align: center; color: #ffffff; z-index:2; background: url('http://static.tumblr.com/8yo5xxv/I67m171ns/bg-menu.png');} /* Cor do link normal */
.sl_menu a span span.sl-w2{color: #b07877; z-index:3; text-shadow: 0px 2px 0px #ffffff;} /* Cor do link hover */
3. Cole o código abaixo onde você quer que apareça o menu:
<ul id="sl_menu" class="sl_menu"> <li><a href="/"> ... </a></li> <li><a href="/"> ... </a></li> <li><a href="/"> ... </a></li> </ul>
Pronto! Lindo, né? Qualquer dúvida, favor consultar o meu ask-me e tirar a sua dúvida.
Obrigada ao TTHY!