1. Forsiden
  2.  » Navigation
  3.  » Dropdown menu artikel

CSS-menu eksempel 11: Navigationsbjælke

Menupunkterne fylder ud

Tricket for at få menupunkterne til at udfylde hele menublokken er følgende: Jeg dividerer hele bredden (45em) med 5, som er antallet af menupunkter, og får resultat 9em. Men i menublokken er bredden af 1em bestemt af skiftstørrelsen 80%, som jeg derfor skal dividere op i 9 em for at få det “rigtige” em-mål, som er 11,25 em.

Men jeg skal også tage hensyn til, at jeg har en border-right på hvert li-element på 1 pixel. 1 pixel gange 5 divideret med 0,8 er ca. 0,4 em, så derfor skal hvert li element være 11,21 em, så det er det breddemål, jeg bruger på li-elementet:

div#navbar li { 
  position:relative; 
  width:11.2em; 
  line-height:1em;
  margin:0; padding:0; list-style:none; float:left;
  border-bottom:none;
  border-right:1px solid black; }
div#navbar li#last {border-right:none;}

Det passer ikke helt nøjagtigt, så du vil kunne iagttage en smal hvid kant ved mouseover på det sidste link.