Evitare l'overflow orizzontale di una <div> annidata

[Hil]

Ciao a tutti! Sto scrivendo l'intestazione di una pagina web. L'intestazione consiste in due <div> e da una lista[*] inline. Il problema che devo affrontare riguarda l'overflow della <div> annidata, causato dal ridimensionamento della finestra del web browser. Esiste un modo per evitare che la <div> annidata fuoriesca dalla <div> principale?

La struttura della pagina HTML è la seguente:

<div id="header">
    <div class="menu">
        <ul>[*]Elemento 1[*]Elemento 2[*]Elemento 3[*]Elemento 4[*]Elemento 5[/list]
    </div>
</div>

Mentre il codice CSS relativo è:

li {
    display: inline;
}

#header {
    background: #333333;
    border: 2px solid #ff0000;
}

#menu {
    height: 60px;
    text-align: center;
    margin: 0 auto;
    width: 500px;
    position: relative;
    border: 2px solid #0000ff;
}

Quando la larghezza della finestra del web browser si riduce ad una dimensione inferiore della <div id="menu">, quest'ultima straborda.





Grazie in anticipo!