Css Only Tab Menu


This is an example of a simple tabbed menu with rollover and active states using NO javascript.
It is completely css based using 2 images for "off" and "on" states.
NB - To keep this menu as simple as possible, it uses FIXED width images and therefore cannot adjust to the tab texts.
The menu itself is made up of an unordered list with the id horizontal_menu:
<ul id="horizontal_menu">
  <li><a href="#">Home</li>
  <li><a href="#">Tab menu item 2</a></li>
  <li><a href="#">Tab menu item 3</a></li>
  <li><a href="#">Tab menu item 4</a></li>
  <li><a href="#">Tab menu item 5</a></li>
  <li><a href="#">Tab menu item 6</a></li>
</ul>
Here is the css for this menu:
ul#horizontal_menu {
  font-size: 12px;
  margin:0px;
  padding:0px;
  }
#horizontal_menu li {
  margin: 2px 0 0;
  list-style:none;
  float:left;
  padding:1px;
  text-align:center;
  } 
#horizontal_menu a {
  color: #FFF;
  display: block;
  width:120px;
  height:30px;
  padding-top: 12px;
  text-decoration: none;
  background: #3399CC url(images/tab_off.gif) no-repeat;
  } 
#horizontal_menu a:hover, #horizontal_menu a:active, #horizontal_menu a.selected {
  color: #FFF;
  background: #FFCC33 url(images/tab_on.gif) no-repeat;
  }
	
Here are the images that I used:
tab_off.gif
tab_on.gif
 Are My Sites Up?  ServWise - Low cost, reliable and fast hosting with 24/7 support