I thought I'd share my code for creating a tab menu that has a colored tab effect on hover. I'll also step you through easily customizing it. It includes gradients, transparency, and rounded borders. 
You can either create your own cool style text/image to upload or just the plain text.

Code:

.mainmenu img{
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, rgba(200,200,200,0.5)), color-stop(1, rgba(0,0,0,0.5)));
        background:-moz-linear-gradient(top, rgba(200,200,200,0.5) 5%, rgba(0,0,0,0.5) 100%);
        background:-webkit-linear-gradient(top, rgba(200,200,200,0.5) 5%, rgba(0,0,0,0.5) 100%);
        background:-o-linear-gradient(top, rgba(200,200,200,0.5) 5%, rgba(0,0,0,0.5) 100%);
        background:-ms-linear-gradient(top, rgba(200,200,200,0.5) 5%, rgba(0,0,0,0.5) 100%);
        background:linear-gradient(to bottom, rgba(200,200,200,0.5) 5%, rgba(0,0,0,0.5) 100%); 
 
 -moz-border-radius-topright: 5px 5px;
border-top-right-radius: 5px 5px;
  -moz-border-radius-topleft: 5px 5px;
border-top-left-radius: 5px 5px;
  border: 1.5px rgba(0,0,0,0.15) solid;
  
}

.mainmenu img:hover {
 background-color:rgba(229,145,173,0.3);  
 
}

This is for the image version if you just use text then just remove "img" so that it says .mainmenu { and .mainmenu:hover {

On the hover you can change the colored tabs using rgba. If you don't know this is red, green, blue, alpha(transparency) Here is a helpful place to get the rgb http://www.colorspire.com/rgb-color-wheel/

Next you can remove transparency if you'd like by setting alpha to 1 on both parts of the mainmenu and hover. Here is the code for the mainmenu part

Code:

 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, rgba(200,200,200,1)), color-stop(1, rgba(0,0,0,1)));
        background:-moz-linear-gradient(top, rgba(200,200,200,1) 5%, rgba(0,0,0,1) 100%);
        background:-webkit-linear-gradient(top, rgba(200,200,200,1) 5%, rgba(0,0,0,1) 100%);
        background:-o-linear-gradient(top, rgba(200,200,200,1) 5%, rgba(0,0,0,1) 100%);
        background:-ms-linear-gradient(top, rgba(200,200,200,1) 5%, rgba(0,0,0,1) 100%);
        background:linear-gradient(to bottom, rgba(200,200,200,1) 5%, rgba(0,0,0,1) 100%); 

Now to change gradient under .mainmenu { it works the same way with rgba. It is setup to work in multiple browsers so you'll have to change each line of the code. The first part is the top and the second is the bottom as such: (top, !top!rgba(200,200,200,0.1) 5%, !bottom!rgba(0,0,0,0.1) 100%);

One last thing to cover is the tabs style. There is a border effect so that the tops are rounded and the bottom has corners. If you want completely rounded corners use this to replace the current code. 

Code:

-moz-border-radius: 5px 5px;
border-radius: 5px 5px;

You can change the #px, the higher the number the more rounded the corners will be. There is also a small border which you can change right below the border radius effect. You can change it to 0px if you'd like to remove it or change the color as rgba as well.

Hope this helps everyone, here is an example: [You must be registered and logged in to see this link.]