A A A A A

Horizontal Navigation Bar Example

Accessibility Features of Example

Example

HTML Code

<div id="hmenu">
<ul>
  <li><a href="http://www.w3.org/Consortium/activities">W3C Activities</a></li>
  <li><a href="http://www.w3.org/TR/">W3C Technical Reports</a></li>
  <li><a href="http://www.w3.org/Consortium/siteindex">W3C Site Index</a></li>
  <li><a href="http://www.w3.org/Consortium/new-to-w3c">New Visitors</a></li>
  <li><a href="http://www.w3.org/Consortium/">About W3C</a></li>
  <li><a href="http://www.w3.org/Consortium/join">Join W3C</a></li>
  <li><a href="http://www.w3.org/Consortium/contact">Contact W3C</a></li>
</ul>  
</div>

CSS Code

/* CSS Document */

div#hmenu {
   margin: 0;
   padding: .3em 0 .3em 0;
   background: #ddeebb;
   width: 100%;
   text-align: center;
}

div#hmenu ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

div#hmenu ul li {
   margin: 0;
   padding: 0;
   display: inline;
}

div#hmenu ul a:link{
   margin: 0;
   padding: .3em .4em .3em .4em;
   text-decoration: none;
   font-weight: bold;
   font-size: medium;
   color: #004415;
}

div#hmenu ul a:visited{
   margin: 0;
   padding: .3em .4em .3em .4em;
   text-decoration: none;
   font-weight: bold;
   font-size: medium;
   color: #227755;
}

div#hmenu ul a:active{
   margin: 0;
   padding: .3em .4em .3em .4em;
   text-decoration: none;
   font-weight: bold;
   font-size: medium;
   color: #227755;
}

div#hmenu ul a:hover{
   margin: 0;
   padding: .3em .4em .3em .4em;
   text-decoration: none;
   font-weight: bold;
   font-size: medium;
   color: #f6f0cc;
   background-color: #227755;
}

Navigation

Other HTML Best Practices

Working Group