Horizontal Navigation Bar Example in HTML

/* HTML Document */

<h2 class="offscreen">W3C Web Resources</h2> 
<div id="hmenu"> 
<ul> 
  <li><a href="http://www.sourcecodernp.blogspot.com">HOME</a></li> 
  <li><a href="http://www.sourcecodernp.blogspot.com">XML</a></li> 
  <li><a href="http://www.sourcecodernp.blogspot.com">HTML</a></li> 
  <li><a href="http://www.sourcecodernp.blogspot.com">C & C++</a></li> 
  <li><a href="http://www.sourcecodernp.blogspot.com">ASP.Net</a></li> 
  <li><a href="http://www.sourcecodernp.blogspot.com">PROJECT</a></li> 
  <li><a href="http://www.sourcecodernp.blogspot.com">ABOUT US</a></li> 
</ul>   
</div> 

/* CSS Document */ 

.offscreen { 
  position: absolute; 
  top: -30em; 
  left: -300em; 
} 

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; 
}