Menu con "hover" animado

Se puede conseguir con Query: es facilito de realizar y queda muy, muy bien. Pasando el ratón sobre cada item, el hover despliega (por ejemplo) una caja con un efecto "fade" muy suave. Es cosa de webdesignerwall, y podéis ver mi prueba en el menú de este Blog.

Pasos: En el caso de mi menú de prueba

.- CSS:

*--------Menu Hover-----------*
.menu {
margin: 100px 0 0;
padding: 0;
list-style: none;
}
.menu li {
padding: 0;
margin: 0 2px;
float: right;
position: relative;
text-align: center;
}
.menu a {
padding: 14px 10px;
display: block;
color: firebrick;
width: 144px;
text-decoration: none;
font-weight: bold;
background: url(./button.gif) no-repeat center center;
}
.menu li em {
background: url(http://.../hoverMenu.png) no-repeat;
width: 180px;
height: 45px;
position: absolute;
top: -85px;
left: -15px;
text-align: center;
padding: 20px 12px 10px;
font-style: normal;
z-index: 2;
display: none;
}
*----------Fin--------------*

No le he colocado ningún fondo al menú, tan sólo la imagen del hover.

.- SCRIPTS:

<script src='http://.../jquery.js' type='text/javascript'/>

<script type='text/javascript'>

$(document).ready(function(){



$(&quot;.menu a&quot;).hover(function() {

$(this).next(&quot;em&quot;).animate({opacity: &quot;show&quot;, top: &quot;-75&quot;}, &quot;slow&quot;);

}, function() {

$(this).next(&quot;em&quot;).animate({opacity: &quot;hide&quot;, top: &quot;-85&quot;}, &quot;fast&quot;);

});





});

</script>

.- HTML:

<ul class='menu'>

<li>

<a href='http://picasso-junio.blogspot.com/' title='Inicio'>Inicio</a>

<em>Pruebas con Query</em>

</li>

<li>

<a href='http://cafe-junio.blogspot.com/' title='Ir a Epílogo'>Epílogo</a>



<em>Explicaciones de todas mis pruebas</em>

</li>

<li>

<a href='http://galeriaii.blogspot.com/' title='Para situarse'>Mapa</a>

<em>Una guía de lo principal</em>

</li>

</ul>

Muy sencillín...