Du verwendest CSS-Anweisungen wie float und position ohne dich über ihre Funktion und ihre Auswirkungen informiert zu haben. Die Browser richten sich jedoch nach den HTML- und CSS-Regeln.
In deinem Beispiel hast du den Dokumentenfluß nicht beachtet. Durch deine float- und position-Angaben werden die betroffenen Container aus dem Dokumentenfluß genommen. Dadurch ist der nav-Container leer und wird nicht angezeigt.
Durch die height-Angabe machst du ihn zwar trotzdem optisch sichtbar, aber nur für Menschen. Die anderen Elemente reagieren jedoch nicht auf ihn. Deshalb ist in deinem Fall die height-Angabe nicht nur überflüssig sondern sogar schädlich. Dadurch führst du dich nämlich selbst auf eine falsche Spur. Durch die Sichtbarkeit gehst du davon aus dass er eine Größe hat. Für die anderen Container ist der nav-Container aber nicht vorhanden.
In den Dokumentenfluß solltest du nur eingreifen wenn du dir vorher über die Auswirkungen im klaren bist.
Ich versuche das mal zu verdeutlichen. Gib in der CSS-Datei mal
eine Hintergrundfarbe, zum Beispiel yellow. Dann kannst du die Größe der li-Elemente sehen. Danach richtet sich das Aufklappmenü.
Das die li-Elemente vermeintlich unten über den nav-Container mit dem weißen Hintergrund hinausragen ist nur eine optische Darstellung, hat durch deine float-, position- und height-Angaben aber mit dem Verhalten im Verhältnis zum nav-Container nichts zu tun.
Es ist ein typischer Anfängerfehler nach der Darstellung der Browser zu gehen, ohne im Vorfeld zu überlegen und zu lernen, warum die Darstellung so erfolgt. height-Angaben sind zum Beispiel fast immer überflüssig. Sie schaffen oder kaschieren Probleme, häufig zudem an anderer Stelle, lösen sie aber nicht.
