Hola, espero que te sirva esto, lo hice bien apurado porque en Chile con las 8 am y me estoy yendo al trabajo
Para ser honesto, lo re re re adapté por enésima vez de alguien que me lo enseñó en un foro, hago la aclaración.
Mira, no soy experto por lo que pido a algún amigo con más trayectoria que lo revise y lo corrija (JavierB por ejemplo con su impresionante cantidad de mensajes, felicitaciones!!!, esa si que es voluntad de ayuda).
Esto que hice es un menu hecho con una lista, con tres botones, con lo que tú querías, una imagen en el fondo (acá es una sola que se ubica arriba o abajo, allí está el efecto, por lo que no hay demora en la carga como en javascript) y un texto html alineado a la izquierda.
El html:
Código:
<ul id="menu">
<li><a href="index.html" id="inicio">Inicio</a></li>
<li><a href="empresa.html" id="empresa">Empresa</a></li>
<li><a href="servicios.html" id="servicios">Servicios</a></li>
</ul>
Y el css:
Código:
ul#menu {
list-style:none;
margin:1px 2px;
padding:0;
}
ul#menu li {
padding:0;
float:left;
}
ul#menu li a {
display:block;
width:145px;
height:75px;
text-decoration:none;
}
ul#menu li a:hover {
background-position:bottom;
}
ul#menu li a span {
display:none;
}
#inicio {
background-image:url(imagen.jpg);
}
#empresa {
background-image:url(imagen.jpg);
}
#servicios {
background-image:url(imagen.jpg);
}
Puedes ponerle a cada botón una imagen diferente pero la gracia es que la mitad de arriba tiene que ser de un color y la mitad de abajo de otra, lo haces con tu programa gráfico favorito. Acá todos tienen como vez una sola imagen de fondo de 145*175 px.
Me faltó ponerle estilo a los textos de la izquierda (voy a llegar atrasado
pero allí tú le pones tu cuento.
Saludos y espero haber sido útil.