Unser vorläufiges Resultat braucht nur noch ein klein wenig Kosmetik, dann ist es fertig. Am meisten stört natürlich jetzt die Position: das Menü erscheint links oben in der Ecke. Wenn du damit zufrieden bist, ist's ja gut, andernfalls können wir das jetzt noch beheben.
Sobald wir mit CSS zu positionieren beginnen (und das haben wir ja nun mit position: absolute
getan), übernehmen wir die Verantwortung für die Lage der einzelnen Elemente auf dem Schirm.
Unsere Menü-Einträge erhalten nun eine genau berechnete vertikale Position, und die bezieht sich auf
ihr Mutter-Element, in unserem Fall also auf die <div id="meinmenu">.
Unser Stylesheet enthält zu dem Thema nur eine (provisorische) Angabe:
#meinmenu { background: #cff }
Diese Hintergrundfarbe hatte vor allem den Zweck, sichtbar zu machen, wo sich die div befindet.
Während der Entwicklung von Seiten, die mit CSS-Positionierung arbeiten, hilft das oft weiter, und auch
jetzt erhalten wir einen kleinen Hinweis: es scheint, als
ob die div gar nicht mehr vorhanden wäre. Durch die absolute Positionierung haben sich die
Menü-Einträge davongemacht und die div nimmt nun plötzlich keinen Raum mehr ein.
Was wir korrigieren müssen:
#meinmenu { position: relative ; height: 180px ; background: #cff }
(Die Hintergrundfarbe kannst du gerade so gut wieder rausnehmen, das überlass ich dir).
Die Höhenangabe ist genau so zwingend wie die Angabe position: relative, denn ohne sie
rutscht der abschliessende Hinweis, mit der Maus übers Menü zu fahren, nach oben, weil die div ja
keine Ausdehnung mehr hat.
Im Skript kannst du auch noch etwas Kosmetik vornehmen:
zuklappen mit window.setTimeout("zuklappen(),1000") gemacht wird,
könntest du den wieder durch den direkten Aufruf zuklappen() ; ersetzen. <div id="meinmenu"> könntest du auch vom Skript in seinem
erstmals-Abschnitt ausrechnen und installieren lassen, statt sie im Stylesheet anzugeben. Auf diese
Art kannst du später weitere Menüpunkte hinzufügen, ohne dass du Anpassungen im Stylesheet machen musst.