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:

web development, design & programming

Css Only Tab Menu