# Problem with CSS .selected class

**URL:** <https://forum.kirupa.com/t/problem-with-css-selected-class/327349>\
**Category:** web dev\
**Created:** [February 23, 2012, 2:20pm UTC](https://forum.kirupa.com/t/problem-with-css-selected-class/327349 "2012-02-23T14:20:26Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![nnnniiiicccc](https://avatars.discourse-cdn.com/v4/letter/n/49beb7/32.png) [@nnnniiiicccc](https://forum.kirupa.com/u/nnnniiiicccc)\
**Post date:** [February 23, 2012, 2:20pm UTC](https://forum.kirupa.com/t/problem-with-css-selected-class/327349/1 "2012-02-23T14:20:26Z")

</div>

Hi,

I am currently developing this website:

[http://greencuisineorganics.electra-…te=common/home](http://greencuisineorganics.electra-2.titaninternet.co.uk/opencart/index.php?route=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:

```auto
#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;
}

```