Hola, gracias a los dos por contestar.
Cita:
Iniciado por hades87 
Te recomendaría estos 2 tutoriales:
Por que creo que andas algo liado, aún que lo que intentas hacer podrías usar tambien imágenes con el fondo transparente.
Estoy liado, pero porque no he encontrado aun algun ejemplo donde suceda lo mismo. Los tutoriales estan muy bien, pero no se ajustan a mi caso.
Cita:
Iniciado por Mikmoro Mira cómo está hecho (pasa el ratón por las opciones).
Sólo para que veas que la técnica es que el lateral izquierdo es el fondo del enlace, y dentro lleva un span con el resto.
Debí haber subido las imagenes para que viesen como son:
Borde izquierdo:
Código:
h ttp://img158.imageshack.us/img158/5019/menupcpalbordeizq.png
Centro:
Código:
h ttp://img197.imageshack.us/img197/7936/menupcpalcentro.png
Puse las imagenes de esa forma para que los botones pudiesen tener cualquier ancho.
Para que se viese bien el contenido de la etiqueta a hice esto:
Código:
<li id="op-primera"><div id="mpcpal-centro"><a href="#"><div id="mpcpal-izq"></div><div id="enlace">Inicio</div></a></div></li>
Se ven bien por defecto, sin embargo, si pongo el ratón encima de la opción izquierda el contenido de enlace cambia de estado, pero lo otro no. Pero si pongo el ratón encima del borde izquierda este se modifica.
Lo ideal es que al poner el ratón encima de a se modificase los dos divs que estan dentro, pero al haber 2 imagenes, solo se modifica una.
¿Habría alguna manera para hacer que cambie otro elemento (a parte de la etiqueta donde está el ratón) cuando se pone el ratón encima de una etiqueta?
Un saludo, y gracias por ayudar.