Problem with CSS .selected class

programming web dev
1

Hi,

I am currently developing this website:

http://greencuisineorganics.electra-…te=common/home

Using OpenCart…

The problem I have is if you click on the menu tabs at the top, it adopts the background image of the .selected class. However It does not adopt the #color until the mouse has hovered over it once. After which is stays.

Have a look at the link above, its self explanatory. Ignore the about us tab for now as this one isn’t working.

Any suggestions would be much appreciated!!

CSS Below:

#header .div4 {
    width: auto;
    clear: right;
    float: right;
    height: 32px;
}
#header .div4 a {
    float: left;
    margin-left: 5px;
    width: 100px;
    height: 26px;
    padding-top: 6px;
    padding-bottom: 0;
    background: url('../image/tab_1.png') no-repeat;
    text-align: center;
    color: #fff;
    text-decoration: none;
    font-size: 17px;
    position: relative;
    z-index: 1;
}

#header .div4 a:hover {
    color:  #fff;
}

#header .div4 a.selected {
    background: url('../image/tab_2.png') no-repeat;
    color: #B22334;
    padding-bottom: 10px;
    z-index: 3;
    text-decoration:underline;
}