Mirá este que está muy bueno, usa imagen pero creo que se puede adaptar de forma muy simple para lo que buscas.
Un poco del código del post original
Código Javascript
:
Ver original// Begin jQuery
$(document).ready(function() {
/* =Reflection Nav
-------------------------------------------------------------------------- */
// Append span to each LI to add reflection
$("#nav-reflection li").append("");
// Animate buttons, move reflection and fade
$("#nav-reflection a").hover(function() {
$(this).stop().animate({ marginTop: "-10px" }, 200);
$(this).parent().find("span").stop().animate({ marginTop: "18px", opacity: 0.25 }, 200);
},function(){
$(this).stop().animate({ marginTop: "0px" }, 300);
$(this).parent().find("span").stop().animate({ marginTop: "1px", opacity: 1 }, 300);
});
/* =Shadow Nav
-------------------------------------------------------------------------- */
// Append shadow image to each LI
$("#nav-shadow li").append('<img class="shadow" src="images/icons-shadow.jpg" alt="" width="81" height="27" />');
// Animate buttons, shrink and fade shadow
$("#nav-shadow li").hover(function() {
var e = this;
$(e).find("a").stop().animate({ marginTop: "-14px" }, 250, function() {
$(e).find("a").animate({ marginTop: "-10px" }, 250);
});
$(e).find("img.shadow").stop().animate({ width: "80%", height: "20px", marginLeft: "8px", opacity: 0.25 }, 250);
},function(){
var e = this;
$(e).find("a").stop().animate({ marginTop: "4px" }, 250, function() {
$(e).find("a").animate({ marginTop: "0px" }, 250);
});
$(e).find("img.shadow").stop().animate({ width: "100%", height: "27px", marginLeft: "0px", opacity: 1 }, 250);
});
// End jQuery
});
http://www.adrianpelletier.com/2009/05/31/create-a-realistic-hover-effect-with-jquery-ui/
Demo
http://adrianpelletier.com/sandbox/jquery_hover_nav/
Ojalá te sea de utilidad. Saludos!
..