Layout 2

Nun haben wir noch das Problem mit den Trennlinien. Das im letzten <li> enthaltene <a> soll keine haben. Leider beziehen sich unsere Selektoren auf alle <a> innerhalb des letzten <li>. Das bedeutet jedes letzte <li> und alle darin enthaltenen <a>. Außerdem haben wir noch das Problem, dass wir bei vielen Untermenüs nicht wissen, welches das letzte <li> im letzten <ul> ist, und umgekehrt.

Da kann nun eine ganze Weile rumprobiert werden. Aber es gibt eine ganz einfache Lösung. Nehmen wir an, wir nehmen nicht den unteren Rahmen als Trennlinie, sondern den oberen. Dann müssen wir das aller erste <a> nur ausnehem, und das können wir immer bestimmen mit ">" und ":first-child".

Ich empfehle auch, es selbst zu probieren, und verschiedene Tests zu machen.

CodeZone

CSS

HTML

Auf Testzone anwenden