Learnit Training

8. Navigation beautify with CSS

At the top of our page there is a number of links in a list. For the list are bullets and the items are among each other. A different format is required for our navigation menu. Add the code below the last line of your CSS file and view the result.

Online Free HTML5 and CSS training from Learnit

  • When display: inline; Specified for a Li in the stylesheet then makes sure that the bullet list does not come together but next to each other. Also the bullets disappear.
  • The margin-left: 20px; Makes sure the items are not against each other but left 20 pixels away now.
  • The color specified by the A picker (applies to all anchors/links) makes all anchors/left white.
  • The same A picker also specifies a text-decoration property that causes the default line to disappear below each link.
  • Finally, a a:hover-kiezer is added which ensures that when a visitor hovers over the link the link gets another (orange in this case) color.