Presentación y primeras dudas

[cubeman]

Muchas gracias, Bandit. Con ese tutorial finalmente he conseguido que mi menú tome forma (y te aseguro que habré probado ya como 5 ó 6 sin éxito). También he pasado el código a HTML5. Aún tengo que pulir el estilo, pero hay un par de cosas que consigo resolver:

1) Le he puesto border-radius a los submenús, lo cual funciona, pero al pasar el ratón sobre el botón inferior, los bordes se ponen cuadrados. He intentado arreglarlo añadiéndole box-sizing: border-box, pero seguía haciendo lo mismo. ¿Alguna idea?

2) Intenté reducir mínimamente la altura del menú porque me gustaba más, pero entonces, al pasar el ratón sobre los botones, éstos mantenían la altura de antes del cambio, así que lo dejé como está ahora, pero quisiera entender por qué pasa eso.

Adjunto el HTML y CSS actuales del menú:

Código HTML:

 <nav>
        <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="#">TRAYECTORIA</a>
                <ul class="submenu">
                    <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="#">GALERÍA</a>
                <ul class="submenu">
                    <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>
    </nav> 

Código:

nav ul
{
    list-style: none;
    padding: 0;
}

nav, li ul
{
    background: #610B0B;
}

#menu
{
    margin: 0 auto 1.1em;
    width: 100%;
}

#menu a
{
    color: #F8ECE0;
    text-decoration: none;
}

#menu > li    /* Afecta sólo a los hijos de #menu */
{
    display: inline-block;
    width: 16.2%;
}

#menu > li > a
{
    display: block;
    padding: 0.5em 1em 0.5em 0.5em;
}  

#menu li:hover
{
    background: #BD5C44;
    text-shadow: 0.1em 0.1em 0.25em black;
}

#menu li:hover a
{
    color: #F8ECE0;
}

#menu li:hover ul
{
    display: block;
}

#menu li ul
{
    border-radius: 0 0 4px 4px;
        -moz-border-radius: 0 0 4px 4px;
        -webkit-border-radius: 0 0 4px 4px;
    box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
    display: none;
    position: absolute;
}

.submenu a
{
    display:block;
    padding: 0.5em 0.9em 0.5em 0.5em;
    width: 100%;
}