Bueno, tengo que reflotar el tema porque soy incapaz de rematar el puñetero menú. Tras un tiempo con la página aparcada, he vuelto a ello, pero no puedo cuadrarlo (incluso llegué a intentar otro tipo de menú, pero el resultado fue mucho peor...).
Tras la inestimable ayuda del forero
Bonez, el susodicho menú quedó como se puede ver en la siguiente URL: http://www.pedroortizolivas.es
(nota: olvidad todo lo que hay ahí, que es provisional; centrémonos en el menú)
Estos son mis problemas:
1) ¿Qué tengo que hacer para que el menú ocupe el 100% del ancho determinado de la página (1024px)? Si os fijáis, faltan unos píxeles.
Este no es un tema crucial, pero quiero entender cómo se hace bien.
2) Submenús (I): El
background de éstos cambia de color en estado
:hover, pero sólo la parte del texto (probadlo). Yo quiero que cambie el color de fondo del botón completo.
3) Submenús (II): Éstos se superponen al botón del que nacen, pero quedan por debajo del que está inmediatamente a su derecha.
¿Cómo hacer que no se superpongan al menú principal y que nazcan alineados desde el borde izquierdo los botones correspondientes?
4) Submenús (III): ¿Cómo ajusto correctamente ancho de éstos de manera que cada opción del botón TRAYECTORIA esté en una sola línea?
Adjunto código relativo al menú:
HTML
Código:
<div id="barra_menu">
<ul id="menu">
<li id="inicio">
<a href="http://www.pedroortizolivas.es">INICIO</a>
</li>
<li id="semblanza">
<a href="http://www.pedroortizolivas.es/semblanza.html">SEMBLANZA</a>
</li>
<li id="trayectoria">
<a href="http://www.pedroortizolivas.es">TRAYECTORIA</a>
<ul id="submenu_trayectoria">
<li id="expo_individuales"><a href="http://www.pedroortizolivas.es/expo_ind.html">Exposiciones individuales</a></li>
<li id="expo_colectivas"><a href="http://www.pedroortizolivas.es/expo_col.html">Exposiciones colectivas</a></li>
</ul>
</li>
<li id="galeria">
<a href="http://www.pedroortizolivas.es">GALERÍA</a>
<ul id="submenu_obra">
<li id="obra_figurativa">
<a href="http://www.pedroortizolivas.es/figurativa.html">Obra figurativa</a>
</li>
<li id="obra_abstracta">
<a href="http://www.pedroortizolivas.es/abstracta.html">Obra abstracta</a>
</li>
<li id="obra_vanguardista">
<a href="http://www.pedroortizolivas.es/vanguardia.html">Obra vanguardista</a>
</li>
</ul>
</li>
<li id="contacto">
<a href="http://www.pedroortizolivas.es/contacto.html">CONTACTO</a>
</li>
<li id="blog">
<a href="http://pedroortizolivas.wordpress.com.">BLOG</a>
</li>
</ul>
</div>
CSS
Código:
#menu
{
border:0 none;
font-size:1em;
list-style:none;
margin:0;
padding:0;
width:100%;
}
#menu a:hover
{
background:#E8C3B7;
border:1px solid #610B0B;
color:#610B0B;
}
#menu > li
{
border:0 none;
display:inline-block;
float:left;
margin:0;
padding-bottom:0.4em;
position:relative;
}
#menu li a
{
background:#610B0B;
border:1px solid black;
color:#F8ECE0;
height:1.2em;
margin-right:3px;
padding:6px 45px;
text-align:center;
text-decoration:none;
width:auto;
}
#menu li:hover ul
{
display:block;
position:absolute;
width:100px;
}
#menu li ul
{
display:none;
}
#menu li ul li
{
background:#F8ECE0;
color:#610B0B;
float:none;
list-style:none;
padding:0 10px;
width:150px;
}
#menu li ul li a
{
background:#F8ECE0;
border:none;
color:#610B0B;
margin:0;
padding:0;
text-align:left;
text-decoration:none;
width:auto;
}
#menu li ul li a:hover
{
background:#FEAF99;
border:none;
color:#610B0B;
}
A ver si esta vez lo consigo... Mil gracias por adelantado.