Sie beginnen mit der Vorbereitung der Box-Modell-Eigenschaften für die ungeordnete Liste und deren Bestandteile.
Zunächst bekommt die ul-Liste eine Breite. Damit die Navigationspunkte auch bei einem Textzoom mitwachsen, wird die Breite in der Einheit em definiert, die auf der Schriftgröße basiert. 1em ist die für das Element definierte Schriftgröße und die Liste erbt font-size:small von body, was ziemlich genau 13px entspricht. 6em wären also eine Breite von 78px.
Die roten Linien für die Navigation werden geschickt aufgeteilt, sodass keine der horizontalen Linien gedoppelt wird:
- Die obere Linie wird mit border-top an das ul gegeben (und nicht an die Listenelemente).
Die Linien links und unten bekommen die Listenelemente.
Und so sehen die Seiten danach im Browser aus:
Abbildung 16.4: Navigation mit gestalteter Liste