Create a CSS Tab

Create a CSS Tab

Download Here

<style>
* {padding:0; margin:0;}
body {background:url(images/bg.jpg) repeat; font-family:Georgia, "Times New Roman", Times, serif; color:#212713;}
#wrap {width:1000px; margin:auto;}
#contentwrap {background:url(images/contentbg.gif) repeat-y; padding:10px 0 3px 0;}
#menu {background:url(images/contenttop.gif) center bottom no-repeat; height:44px; padding-bottom:11px;}
#contentbtm {background:url(images/cntntbtm.gif) center no-repeat; height:12px;}
ul {list-style:none;}
#menu li {display:inline; font:bold 22px Comfortaa;}
#menu li a {display:block; height:44px; float:left; background:url(images/menu2.gif) right top no-repeat; margin-right:3px; padding-right:10px; color:#dbe7af; text-decoration:none;}
#menu li a span {display:block; background:url(images/menu1.gif) left top no-repeat; padding:7px 20px 0 30px; height:37px;}
#menu li a:hover {background:url(images/menuh2.gif) right top no-repeat; color:#1b2502; text-shadow:#fff 1px 1px 1px;}
#menu li a:hover span {background:url(images/menuh1.gif) left top no-repeat;}
#menu li.active a {background:url(images/menuh2.gif) right top no-repeat; color:#1b2502; text-shadow:#fff 1px 1px 1px;}
#menu li.active a span {background:url(images/menuh1.gif) left top no-repeat;}
#mainpage {padding:0 10px 10px 10px;}
</style>
<div id="wrap">
 <div id="menu">
  <ul>
  <li class="active"><a href="index.html"><span>Home</span></a></li>
  <li><a href="#"><span>About</span></a></li>
  <li><a href="#"><span>Contact</span></a></li>
  </ul>
 </div>
 <div id="contentwrap">
  <div id="mainpage">
   Contents
  </div>
 </div>
 <div id="contentbtm"></div>
</div>