css - visited link - hover bg color...

[Dodge]

Hi,

I have set up the links, on my pages, to begin blue (a), hover as red (:hover), active flashes yellow (:active) and links to visited pages is green (:visited). The hover is also set to use tex-align: right to shift the text.

I have used this order of specificity:

link
active
hover
visited

Okay - here's the rub...
On the "visited" links I don't get the red hover background color (when hovering) ... :\ the links remain green on hover .... however the alignment is in effect.

Here is the css

li.topmenu li a {
background-color: #1176d6;
color: #ffffff;
padding: 2px 3px;
display: block;
text-decoration: none;
}

li.topmenu li a:hover {
padding: 2px 3px;
color: #ffffff;
background-color: #ff0000;
text-decoration: none;
text-align: right;
}

ul.topmenu li a:active {
background-color: #ffff00;
color: #ff0000;
font-weight: bold;
padding: 2px;
}

ul.topmenu li a:visited {
color: #000000;
font-weight: bold;
padding: 2px;
background-color: #11d776;
}


SO my question is:

Is this normal behavior or have I botched up the styles for those links? Ideally I would like for the visited links to hover red as well.

Thanks
Dodge

[oldcrazylegs]

Standard specificity is:

link
visited
hover
active

[Tynan]

The states must be defined in the correct order. Here is the order, starting with the one you must define first:

1. link
2. visited
3. hover
4. active

[Dodge]

Crud! I misread (or in laziness didn't "completely" read) this page...

http://www.meyerweb.com/eric/css/link-specificity.html

I stopped at the first set of pseudo classes ... my bad.

Thank you very much for setting me straight! That took care of my issue. :)

Take care!
Dodge