Nehmen wir uns nun die einzelnen Einträge in unserem Menü vor. Sie sind jeweils mit einer
class versehen, die bereits eine Aussage darüber macht, in welcher hierarchischen Stufe
des Menüs der jeweilige Hyperlink steht. Die einzelnen Menü-Einträge können wir recht einfach
gestalten. Hier ist mal ein Vorschlag für die Einträge der ersten Stufe:
.stufe1 { width: 160px; height: 30px;
padding: 4px ;
border-width: 4px ;
border-style: solid ;
border-color: white ;
background: #ffbbbb;
}
Das sieht dann so aus und du kannst hier natürlich nach eigenem Gutdünken kreativ sein.
Analog dazu hab ich die andern Einträge gestaltet. Damit du siehst, dass hier recht viel Freiheit herrscht, habe ich ihnen abweichende Hintergrundfarben und Rahmenbreiten gegeben. Natürlich kannst du auch andere Gestaltungselemente verschieden einrichten, aber letztlich sollte das Menü doch noch eine minimale stilistische Einheit aufweisen.
Ausserdem hab ich den Hintergrund der ganzen Menü-Div eingefärbt. Das lässt sich am Ende auch wieder entfernen, während der Entwicklung des Menüs sind Hintergrundfarben und Rahmen aber häufig hilfreich, weil sie eine genauere Kontrolle darüber ermöglichen, was wir mit Style-Angaben alles anrichten.
Die weiteren Angaben im Stylesheet sind also:
.stufe2 { width: 150px; height: 30px;
padding: 4px ;
border-width: 2px ;
border-style: solid ;
border-color: white ;
background: #bbffbb;
}
.stufe3 { width: 130px; height: 20px;
padding: 2px ;
border-width: 1px ;
border-style: solid ;
border-color: white ;
background: #bbbbff;
}
#meinmenu { background: #cff }
Und auch das können wir ansehen.