Tab menu 1

HTML code

 <div id="navbar">
  
  <div id="holder"> 

  <ul> 
   <li><a href="#" id="onlink">Home</a></li>
   <li><a href="#">Products</a></li>
   <li><a href="#">Services</a></li>
   <li><a href="#">Gallery</a></li>
   <li><a href="#">Contact</a></li>
  </ul> 

  </div>

  <div id="box">
  This is tab menuThis is tab menuThis is tab menuThis is tab menuThis is tab menuThis is tab menuThis is tab menuThis is tab menuThis is tab menuThis is tab menu
  </div>


 </div>

CSS code

#navbar {
  width:660px;
 } 

 #navbar #holder {
  /*horizontal line*/
  height:44px;/*tinggi line*/
  border-bottom:1px solid #000;/*line*/
  width:652px;/*panjang line*/
  padding-left:25px; 
 } 

 #navbar #holder ul {
  list-style:none;
  margin:0;
  padding:0; 
 } 

 #navbar #holder ul li a { 
  text-decoration:none;
  float:left;
  margin-right:5px;
  line-height:23px;
  font-family:"Arial Black", Gadget, sans-serif;
  color:#000;
  border:1px solid #000;
  border-bottom:none;
  padding:10px 20px 10px 20px;
  width:75px;
  text-align:center;
  display:block;
  background:#333333;
  border-radius:10px 10px 0px 0px;
 } 

 #navbar #holder ul li a:hover {
  background:#666666;
  color:#FFF;
  text-shadow:1px 1px 1px #000;
 }

 /*-------------------------------*/
  #holder ul li a#onlink {
  background:#999999;
  color:#000;
  border-bottom:1px solid #999999; 
 } 

 #holder ul li a#onlink:hover {
  background:#FFF;
  color:#333333;
  text-shadow:1px 1px 1px #000; 
 }

 #box{
  width:655px;
height:400px;
border:1px solid #000;
  border-top:none;
padding:10px;
background:#999999;


 }

Result