CSS: tabbed menu with rollover

In a perfect web all browsers should support the :hover pseudo-class on all elements. Unfortunately, this is not true for Internet Explorer 6, so to create a tabbed menu with a rollover effect we have to add an extra element inside each link. Besides, Internet Explorer (up to version 8) doesn't support neither CSS rounded corners nor CSS gradients, so we're forced to use background images here. To start with, let's first draw our HTML structure using an unordered list:

<ul id="navigation">
  <li><a href="#"><span>Home</span></a></li>
  <li><a href="#"><span>Articles</span></a></li>
  <li><a href="#"><span>About</span></a></li>
  <li><a href="#"><span>Contacts</span></a></li>
</ul>

Both links and extra elements will have a background image on normal and hover states. To change the background image of the inner element on hover we're going to use the :hover pseudo-class of each link:

body {
 font: 76% Verdana, sans-serif;
 margin: 0;
 padding: 0;
}

#navigation {
 height: 2em;
 padding: 0 1em;
 border-bottom: 1px solid #a40;
 margin: 1em 0 0 0;
 list-style: none;
}

#navigation li {
 float: left;
 height: 100%;
 display: block;
 margin-right: 0.5em;
}

#navigation a {
 float: left;
 height: 100%;
 display: block;
 text-decoration: none;
 font-weight: bold;
 color: #fff;
 background: #a40 url(tab-left.gif) no-repeat 0 0;
 padding-left: 1em;
}

#navigation a:hover {
 background-image: url(tab-left-hover.gif);
}

#navigation a span {
 float: left;
 padding-right: 1em;
 display: block;
 height: 100%;
 line-height: 2;
 background: transparent url(tab-right.gif) no-repeat 100% 0;
 cursor: pointer;
}

#navigation a:hover span {
 background-image: url(tab-right-hover.gif);
} 

Internet Explorer 6 has a bug with cursors when it comes to inheritance, so we've duplicated our code by explicitly setting the cursor property to pointer. In IE 6, all menu items and sub-items must be floated. Otherwise, some weird bugs will happen.

Use of background images

Four background images have been used on this menu:

To make these images, which correspond to the left and right side of each menu item both on normal and hover states, follow this steps:

1. create a blank image, making sure that it will have a solid background color which must be the same as the background color of the menu
2. draw a selection with rounded corners and fill that selection with a solid background color
3. add a gradient if you want
4. select two distinct portions of this selection to create the left and right sides of the menu item
5. repeat steps 2, 3 and 4 for the hover state

Remember: users can change your default font size, so your images must be taller and wider than usual to take this change into account. To display them correctly as background images:

1. add a left padding to the link using a length proportional to the width of the left corner image
2. add a right padding to the element within the link using a length proportional to the width of the right corner image

Do not specify a width on the items: to get a fluid result, all you need is an height or at least some padding.

Demo

Live demo