Waar de beschrijving in het boek van het uitklapmenu in oefening 12.3 ophoudt gaat het hier verder met de details. Als eerste worden de dubbele randen aangepakt zodat de rand overal niet meer dan 1 pixel dik is. Dit is de CSS die hiervoor is toegevoegd:
#navigatie li {margin-left: -1px;}
Ieder lijstitem gaat 1 pixel naar links en overlapt dan het lijstitem links ervan.
#navigatie ul {margin-left: 1px;}
Het eerste lijstitem is ook 1 pixel naar links komen te staan, door de hele lijst 1 pixel naar rechts te verplaatsen is de linkerkant van de de lijst weer terug waar ie eerst ook stond.
#navigatie li li {margin-left: 0; margin-top: -1px;}
Ook de lijstitems van de ingesloten lijst zijn 1 pixel naar links komen te staan, met deze regel wordt dit ongedaan gemaakt. Aan de bovenkant komen de lijstitems 1 pixel hoger te staan waarmee de dubbele rand die daar te zien was verdwijnt.
#navigatie li ul { top: 1.55em;}
De lijstitems van de ingesloten lijst zijn 1 pixel hoger komen te staan, door de hele lijst iets lager te positioneren is deze aan de bovenkant weer terug waar ie eerst ook stond.
De kop die onder het menu staat gedraagt zich alsof het menu niet bestaat want:
Door de kop (hier een h1) een clear te geven wordt de float beëindigd.
De beste manier om ruimte te maken tussen menu en kop is met padding, hier 1.5em.
De alinea (p) heeft een kleinere font-size en line-height gekregen (85%/120%). Om te zorgen dat een willekeurige lijst in de tekst (zoals die een paar regels hierboven staat) er hetzelfde uitziet als de alinea's, heeft het lijstitem (li) dezelfde lettergrootte en regelafstand gekregen. Maar dit werkt dan ook weer door op het menu, en dat was nou juist niet de bedoeling. Dus moet de volgende CSS-regel worden toegevoegd:
#navigatie li { font-size: 100%; line-height: 150%; }
Je kunt een en ander in de code van deze pagina bekijken.
WaalWeb Webdesign | Tips bij Zelfstudiehandboek Websites Ontwikkelen