Menú con imágenes (a mano)

CSS

Lo mío es más técnico que "artístico"... a la vista está, je: echad un vistazo en la barra de menú que tengo sobre la cabecera del blog.
Ya sé que me he torcido "ligeramente" diseñando los subtítulos a mano, pero... se trata de poner un ejemplo, no de ponerme de ejemplo, jajjaaaa :$

Como veréis, al picar en cada uno de los elementos de la barra, se despliega una "explicación"... hecha a mano.
De vuestro pulso y tal depende cómo os quede :)

Vamos a explicar cómo se hace, siguiendo algunas directrices de webdesignerwall.

Para empezar, necesitamos un CSS que se vaya a acomodar a los elementos que tenemos en la barra-menú (o sidebar, o donde sea) y se compatibilice con el mnenú que tengamos en nuestro blog. Para este blog es el siguiente:

#nav span {
display: none;
position: absolute;
}
#nav a:hover span {
display: block;
}
#nav-inicio span {
background-color:transparent;
background: url(http://....jpg) no-repeat;
width: 138px;
height: 55px;
top: -50px;
left: 0px;
}
#nav-revolutum span {
background-color:transparent;
background: url(http://...jpg) no-repeat;
width: 157px;
height: 60px;
top: -50px;
left: 2px;
}
#nav-nada span {
background-color:transparent;
background: url(http://.../NadaEp.jpg) no-repeat;
width: 205px;
height: 39px;
top: -50px;
left: 10px;
}
#nav-mapa span {
background-color:transparent;
background: url(http://.../Mapa.jpg) no-repeat;
width: 205px;
height: 39px;
top: -50px;
left: 12px;
}
#nav-trabajos span {
background-color:transparent;
background: url(http://.../Trabajos+001.jpg) no-repeat;
width: 205px;
height: 59px;
top: -50px;
left: 14px;
}
#nav-imagen span {
background-color:transparent;
background: url(http://.../Pruebasep.jpg) no-repeat;
width: 205px;
height: 39px;
top: -50px;
left: 16px;
}
#nav-rss span {
background-color:transparent;
background: url(http://...jpg) no-repeat;
width: 205px;
height: 39px;
top: -50px;
left: 18px;
}

Conforme vayáis añadiendo las url de vuestras imágenes y mirando "vista previa" desde vuestra plantilla, podéis ir cambiando sus distancias respecto de los márgenes del blog, así como los anchos y altos. Aquí ya es cuestión de tener paciencia y andar probando.
Cada imagen irá dentro de un "span", que va a ser lo que permita visualizarla al pasar el ratón sobre el elemento.

.- El HTML: Los "div" de apertura y cierre serán los que correspondan al menú que ya tendréis en vuestro blog (en el de Epílogo, la llamada a mi menú la hice con un "topmenu"... cada quien tendrá la suya). Lo que queremos ver aquí es la forma de desplegar los span, que están encerrados dentro de las tag "ul" de apertura y cierre:

<div id='topmenu'>

<ul id='nav'>



<li id='nav-inicio'><a href='http://cafe-junio.blogspot.com/'>Inicio<span/></a>



</li>





<li id='nav-revolutum'><a href='http://cuentos-historias.blogspot.com/'>Revolutum<span/></a>





</li>





<li id='nav-nada'><a href='http://nada-junio.blogspot.com/'>Nada<span/></a>



</li>







<li id='nav-mapa'><a href='http://galeriaii.blogspot.com/'>Mapa<span/></a>



</li>





<li id='nav-trabajos'><a href='http://adrihome.blogspot.com/'>Trabajos Oscuros<span/></a>



</li>





<li id='nav-imagen'><a href='http://imagen-junio.blogspot.com/'>Imagen<span/></a>



</li>





<li id='nav-rss'><a href='http://feeds.feedburner.com/Eplogo'>RSS<span/></a></li>



</ul>



</div>

Hala: que os quede guapo :D