EDITAR: vea también mi propia respuesta a continuación (2016)

Por ejemplo:

<ul>
    <li class="first"><a href="#" title="">Home</a></li>
    <li><a href="#" title="">Chi siamo</a>
       <ul><li><a href="#" title="">item1</a></li><li><a href="#" title="">item2</a></li></ul>
    </li>
    <li><a href="#" title="">Novità</a></li>
    <li><a href="#" title="">Promozioni</a></li>
</ul>

Luego estilo:

/* level 1 Main menu ----------------------------------------- */

#main-menu > ul{ list-style:none; }

#main-menu > ul > li{
    float:left;
    display:block;
    position:relative;
    margin-left:1em;
}

#main-menu > ul > li.first{
    margin-left:0;
}


/* sub Main menu ----------------------------------------- */

#main-menu > ul > li ul {
    position: absolute;
    z-index:1000;
    display:none;
    left:0;
    top:28px;
}

#main-menu > ul > li:hover ul {
    display:inline-block;
}

#main-menu > ul > li ul li{
    float:left;
    display:block;
    list-style:none;
}

Okay. Entonces, tengo el menú principal que aparece horizontal. También quiero que el submenú se muestre horizontal. Pero por alguna razón, el cuadro ul no cambia de tamaño para alcanzar el ancho total de las etiquetas li, por lo que permanece vertical. Los padres no sufren este problema. Podría hacer que funcione simplemente agregando un ancho adecuado al niño ul, pero esta no es la forma en que quiero usar.

¿Alguna idea?