Hola, tengo un problema con un menu. Os cuento lo que me ocurre:
Tengo un menu al que le pongo las siguientes imagenes:
- Una imagen lateral que va a la izquierda de la primera opción (redondeada) y es con la que tengo problemas.
- Un imagen central para cada opción que hace de relleno (Esta imagen es la que se repite con repeat-x).
- Otra imagen para separar una opción de otra.
- La imagen lateral derecha.
Bien, el problema que tengo es que antes tal como tenia el código puesto, pues al poner el ratón encima de la primera opción "se iluminaba" con hover, pero la imagen de la izquierda no. Por ello cambie el código html:
Código:
<div id="menu-pcpal">
<ul>
<li id="op-primera"><div id="mpcpal-centro"><a href="#"><div id="mpcpal-izq">Inicio</div></a></div></li>
<li id="op"><div id ="mpcpal-centro"><a href="#">Método Gráfico</a></div></li>
...
</ul>
</div>
He puesto el div con el fondo del margen izquierdo del menu dentro de la etiqueta "a" para que cuando el ratón se situe encima se ilumine tambien esa parte.
El codigo css es el siguiente:
Código:
#menu-pcpal #op-primera a {
background: url(../../img/menu-pcpal/menu-pcpal-centro.png) repeat-x center;
amargin-left: 16px; /* Permite visualizar el borde redondeado de la izquierda. */
padding-left: 0px;
padding-right:30px;
margin-right:3px;
}
#mpcpal-izq{
background: url(../../img/menu-pcpal/menu-pcpal-bordeizq.png) no-repeat left;
padding-left: 30px;
}
El problema es que actualmente, se me pone el borde izquierdo a la vez que la imagen "menu-pcpal-centro.png" ya que esa es la imagen del "a" y el div del margen izquierdo está dentro de la etiqueta "a".
En la imagen siguiente se puede ver que sucede:
[IMG]h ttp://img4.imageshack.us/img4/5919/problemamenu.jpg[/IMG]
¿Alguien sabría como solucionarlo? Ahora mismo estoy probando con distintas combinaciones de padding y margin, a ver si consigo hacerlo.
Un saludo