Tab Menu2

Html code

<ul id="tabnav">
  <li class="tab1"><a href="#">home</a></li>
  <li class="tab2"><a href="#">product</a></li>
  <li class="tab3"><a href="#">gallery</a></li>
  <li class="tab4"><a href="#">contact</a></li>
</ul>

<div id="box"></div>

CSS code

ul#tabnav {
text-align: left; 
margin: 1em 0 1em 0; 
font: bold 11px verdana, arial, sans-serif; 
border-bottom: 1px solid #6c6;
list-style-type: none;
padding: 3px 10px 3px 10px; 
}

ul#tabnav li {
display: inline;
}

body#tab1 li.tab1, body#tab2 li.tab2, body#tab3 li.tab3, body#tab4 li.tab4 { 
border-bottom: 1px solid #fff; 
background-color: #fff;
}

body#tab1 li.tab1 a, body#tab2 li.tab2 a, body#tab3 li.tab3 a, body#tab4 li.tab4 a {
background-color: #fff; 
color: #000; 
position: relative;
top: 1px;
padding-top: 4px;
}

ul#tabnav li a {
padding: 3px 4px; 
border: 1px solid #6c6; 
color: #666;
margin-right: 0px;
text-decoration: none;
border-bottom: none;
}

ul#tabnav a:hover {
background: #fff;
}

#box{
width:auto;
height:500px;
border:1px #6c6 solid;
border-top:none;
color:#000000;
position:relative;
top:-10px;

}

Result

website : http://www.cssportal.com/horizontal-menus/unraveled.php