Layout 1

Als erstes kümmern wir uns darum, dass nachfolgende <ul> keinen Hintergrund und Rahmen haben. Das können wir schnell erledigen, indem wir sagen, dass nur das sich direkt in <nav> befindliche <ul> diese Eigenschaften hat. Das heißt wir lösen die Layout-Eigenschaften aus dem <ul> heraus, und definieren ein weiteres mit dem Selektor ">", welches sagt "direkt nachfolgend".

  • nav ul
    alle <ul> innerhalb von <nav>
  • nav > ul
    alle <ul> direkt unter <nav>

Probiere ruhig einmal aus, was passiert, wenn eine zweite Liste <ul> im <nav> erstellt wird.

CodeZone

CSS

HTML

Auf Testzone anwenden