Creating Tabbed Menu (Part 2)
This tutorial are tested with Internet Explorer 7 and Firefox 2 on the PC.


Let's change the color when the mouse is over an item. This is done by assigning different background color to the hover pseudo class. Also, let's add more space around the tabs

a.menu{
  background-color:#6699CC;
  color:#FFFFFF; 
  padding: 10px;
} a.menu:hover{ background-color:#2299CC; color:#000000; } li.menu { list-style-type: none; padding: 10px; }

In a.menu:hover, we set background-color:#2299CC which means this color (darker blud) will be used when the mouse is hovering on the element. color:#000000 changes the the text color to #000000 (black) when the mouse is hovering the link.

padding:10px adds the 10 pixels of space around the element.

Download the .css
Simple example page.

YOu might be wondering we specified padding: 10px to both <a> and <li>; this is because if you only added padding to the a.menu section, then the result will look like this instead:

On the other hand, if you assign the padding of the <li> element to a smaller number (like padding: 8px), the result is like this:

Pick the one you like and go to the next page.