Ver Mensaje Individual
  #4 (permalink)  
Antiguo 04/03/2013, 10:37
Avatar de cubeman
cubeman
 
Fecha de Ingreso: enero-2013
Mensajes: 12
Antigüedad: 11 años, 9 meses
Puntos: 1
Respuesta: Presentación y primeras dudas

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.