Drop Down

Die Hauptnavigation wurde mit position:absolute deklariert. Deswegen rutscht der darunterliegende Text nicht nach unten sobald ein Untermenü aufklappt, denn Elemente mit position:absolute werden von den umgebenden Elementen nicht erkannt oder ignoriert. Sie fallen aus dem üblichen Textfluss heraus.

Position:absolute wird eigentlich dazu benutzt Elemente absolut zu positionieren, mit top left, right bottom. Diese Positionierung richtet sich am body oder am Elternelement aus, welches nicht static ist.

Das umgebende Element nav ist jedoch static aber das spielt hier jedoch keine Rolle, da es keine Positionierung mit top, left, bottom, right, gibt. In dem Fall nimmt es die normale Position im Textfluss ein. Würde man die ul beispielsweise mit right:0 deklarieren, würde sie sich am rechten Rand des body ausrichten.