HTML a, a:hover working, but a:selected is not

Question

Hi I have some HTML and CSS that creates a <ul> on my screen. The items are links to other pages on the site. I want the items in the list to be black normally, light grey if hovered over, and light grey if it's the screen the user is on.

Here is the HTML for the <ul> on the home screen. On the home screen, the list item "Home" should be light grey, while all the others should be black unless hovered over.

<div id="navmenu">
    <ul>
        <li><a class="selected" href="index.html">Home</a></li>
        <li><a href="research.html">Research</a></li>
        <li><a href="cv.html">CV</a></li>
        <li><a href="links.html">Links</a></li>
    </ul>
</div>

My CSS sheet is:

#navmenu {
    margin: auto;
}

#navmenu ul {   
    text-align:center;
}


#navmenu ul li {
    display:inline;
    padding-left:25px;
    padding-right:25px;
}


#navmenu ul li a {
    color:#000000;
}

#navmenu ul li a:hover {
    color:#F2F2F2;
}

#navmenu ul li a:selected {
    color:#F2F2F2;
}

The links are black, which is good. They also turn light grey when I hover over them, which is great. But whenever I select one of the items to go to the page, I can't get the link that I'm currently on to be light grey. This also applies to the home page - whenever I go to the first page, the "Home" item is in black.

Can anyone see what I'm doing wrong here? Any help is appreciated.

Solution

Do you mean to do this:

#navmenu ul li a.selected {
    color:#F2F2F2;
}

See: http://jsfiddle.net/audetwebdesign/nSgDf/

There is currently no :selected pseudo-class in CSS2 or CSS3.

Apply the .selected class to denote the current page that the user is visiting.

Reference: http://www.w3.org/TR/css3-selectors/#pseudo-classes