Fuente: meyerweb

HTML

<div id="menu2">
<a href="http://menus.blogsome.com/">Inicio<span>Pulsa para ir a la página principal</span></a>

<a href="http://www.wordpress.org/">WordPress<span>Es el sistema de gestión de contenidos que uso para esta web</span></a>
<a href="http://www.mozilla-europe.org/es/products/firefox/">Firefox<span>Es el navegador de software libre que está plantando cara a Internet Explorer</span></a>
<a href="http://www.blogsome.com/">Blogsome<span>Es el servicio de alojamiento gratuito en el que está alojado este blog</span></a>

<a href="http://juglar103.blogsome.com/">Juglar<span>Esta es la bitácora del autor de esto donde se habla de internet y blogs</span></a>
<a href="http://www.bloglines.com/blog/Juglar">Bloglines Blog<span>Es el repositorio de sitios y posts que más me han llamado la atención</span></a>
</div>

CSS

#menu2{
position: absolute;
top: 100px;
left: 550px;
width: 200px;
list-style: none;
margin: 0;
padding: 0;
line-height: 0;
}

#menu2 a {
display: block;
text-align: center;
margin: 0 0 1px;
border-width: 0;
text-decoration: none;
color: #FFC;
background: #444;
border-right: 5px solid #505050;
line-height: 32px;
}

#menu2 a:hover {
color: #411;
background: #AAA;
border-right: 5px double white;
}

#menu2 a span {
display: none;
}

#menu2 a:hover span {
display: block;
position: absolute;
top: 190px;
left: 0;
width: 200px;
padding: 5px;
margin: 10px;
text-align: center;
line-height: 16px;
}