Marusya's School Notes

Horizontal Navigation Bar

This is an example of a fully styled horizontal navigation bar:

HTML file:	Displayed by browser:
<style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; } li { float: left; } a:link, a:visited { display: block; width: 120px; font-weight: bold; color: #004000; background-color: #ffff80; text-align: center; padding: 4px; text-decoration: none; text-transform: uppercase; } a:hover, a:active { background-color: #ffff00; } </style> <body> <ul> <li><a href="#">Home</a></li> <li> </li> <li><a href="#">News</a></li> <li> </li> <li><a href="#">Contact</a></li> <li> </li> <li><a href="#">About</a></li> </ul> </body>	Home News Contact About

HTML file:

Displayed by browser:

<body>
<ul>
  <li><a href="#">Home</a></li>
  <li> </li>
  <li><a href="#">News</a></li>
  <li> </li>
  <li><a href="#">Contact</a></li>
  <li> </li>
  <li><a href="#">About</a></li>
</ul>
</body>

I've moved the navigation bar down 10 lines for overall visibility convenience to the reader. The <a> selector has been split into two groups on the stylesheet (link, visited and hover, active). The link's default underline has been removed (no text-decoration) and a space has been inserted between the link blocks.