Selected Hover no background

Question

I have a div wit an unordered list.

If i click on a item i add the class selected.

so the selected item always is like

   <li class="selected">

For all the li item i use.

   li:hover
{
    background-color:#CECEC8;
}

This works.

and for selected items i use

.selected
{
    background-color:#8B8BFF;   
}
.selected :hover
{
    background-color:#8B8BFF;
}

But when i click the selected item and the mouse is still on it (so its hovering over it) the color dosnt change but is still #CECEC8 from li:hover instead of #8B8BFF from.selected :hover.

How can i overrule the li:hover when clicked so the background color of a list item with class=selected is always #8B8BFF even on hover.

The problem is now it isnt immediately visible if you clicked, the color dosnt change from normal hover.

Example

http://jsfiddle.net/FCGtc/1/

Answer 1

EDIT: As the solution differs to the problem in your fiddle, I'll give you two solutions, one for the code in the question and one for your Fiddle

Code in question:

There's a space between your :hover declaration, remove that. Also, it's about specificity. li:hover is more specific than .selected:hover because of the li.

Use the following to keep the same level of specificity:

li:hover
{
    background-color:#CECEC8;
}

li.selected
{
    background-color:#8B8BFF;   
}

li.selected:hover
{
    background-color:#8B8BFF;
}

DEMO: http://jsfiddle.net/FCGtc/8/

Code in Fiddle:

It's because your initial hover selector is a more specific match than your class selector (also remove the space between :hover).

Use these, no need for that god awful important:

#browsecat li.selectedcat
{
    background-color:#8B8BFF;   
}

DEMO: http://jsfiddle.net/FCGtc/9/