Klappmenü und responsive Darstellung

Die Menüpunkte haben eine feste Höhe:

#menu li {
    top: 0px;
    left: 5px;
    height: 22px;
}

Wenn das Menü so schmal wird, dass der Text in eine zweite Zeile umbricht, kommt es zu diesen Überlappungen

Du kannst für Menüpunkte der zweiten Ebene die Höhe auf auto stellen, dann richtet sich die Höhe dort auf den Inhalt aus:

#menu li li {
    height: auto;
}

die richtige Boxenbreite von 180 Pixel wird nicht angezeigt

Definiert sind 170px:

#menu ul {
    float: left;
    list-style-type: none;
    width: 170px;
}

es findet ein Zeilen-Umbruch statt und die Boxen werden nicht mittig zentriert bei einem Bildschirm kleiner 480 Pixel.

Was ist damit gemeint - dass die Hauptmenus untereinander angeordnet werden? für vier Boxen à 170px braucht es halt mindestens eine Breite von 680px. Dadrunter lässt sich ein Einklappmenü nicht auf dieselbe Weise realisieren, da muss man sich überlegen, wie die Elemente dann sinnvoll angeordnet werden können. Eine Möglichkeit wäre es, bei kleineren Bildschirmbreiten alle Menüpunkte untereinander anzuordnen und die untergeordneten Menüpunkte einzurücken. So wie z.B. hier im Forum, wobei das Menü hier nach dem Laden der Seite erstmal als ganzes eingeklappt ist, wozu dann auch noch ein kleines JavaScript benötigt wird