Layout 2

Jetzt befassen wir uns um die einzelnen Links. Diese sollten groß sein, damit sie auch auf mobilen Geräten mit dem Finger getroffen werden können (padding). Ich möchte auch keinen Unterstrich (text-decoration) und eine andere Linkfarbe (color). Natürlich darf eine Begrenzungslinienicht fehlen. Da wieder die gesamte Fläche verlinkt sein soll, müssen wir dies wieder im Link machen <a>.

Eine Schwierigkeit. Wenn wir die Begrenzungslinie mit Hilfe eines unteren Rahmens von <a> erstellen, darf das letzte Element keine Linie haben, da diese sonst mit dem Außenrahmen des Menüs zusammefällt und meist komisch aussieht. Daher nehmen wir den "last-child" Selektor. Aber Achtung, wir müssen das letzte <li> nehmen. Die <a>s würden nicht helfen, da diese immer das letzte sind (nämlich nur eines in einem <li>).

CodeZone

CSS

HTML

Auf Testzone anwenden