selected link option in css

hi all !
i have created rounded corner button in in css
which works perfectly on mouse hover it work perfectly but i want option of selected link i.e if i visiting products link than it should be having same effect which is on mouse hover is mention the example mention below



css:
/* Set the page width */
#wrapper-menu-top, #wrapper-content, #wrapper-footer {
width: 100%;
margin: 0 auto;
font-size: 11px;
text-align: center;
padding-left:30px;
}

#menu-top ul {
margin: 0 auto;
padding: 0.85em 0 0 0;
list-style: none;
font-size: 100%;


}

#menu-top li {
display: inline;
margin: 0 auto;

}

#menu-top a {
float: left;
background:url(../images/menuleft.png) no-repeat left top;
margin-left:3px;
padding:0 0 0 4px;
text-decoration:none;
line-height: 2.00em;
}

#menu-top a span
{
background: transparent url(../images/menuright.png) no-repeat right top;
padding:1px 15px 1px 12px;

color:#000000;
display: block;
cursor: pointer; /* IE doesnt display the hand when you roll over the link for some reason. This fixes it */

}




/*#menu-top a:hover { background-color:#00A6F0}
background-position:100% -42px;
#menu-top a:hover span{ background-color:#00A6F0}
background-position:0% -42px;*/

#menu-top a:hover
{
background:url(../images/menuleft-blue.png) no-repeat left top;
}


#menu-top a:hover span
{

background: transparent url(../images/menuright-blue.png) no-repeat right top;

color: #FFFFFF;
}
#menu-top a:selected
{
background:url(../images/menuleft-blue.png) no-repeat left top;
}


#menu-top a:selected span
{
background: transparent url(../images/menuright-blue.png) no-repeat right top;
color: #FFFFFF; }


---------------------------------------------

html


<div id="wrapper-menu-top">
<div id="menu-top">
<ul>
<li><a href="index.html" title="Downloads"><span>HOME</span></a></li>
<li><a href="#" title="Gallery"><span>PRODUCTS</span></a></li>
<li><a href="#" title="Links"><span>SELECT TYPE OF MOBILE</span></a></li>
<li><a href="#" title="Links"><span>TOP DOWNLOADS</span></a></li>
<li><a href="#" title="Links"><span>FREE STUFF</span></a></li>
<li><a href="#" title="Links"><span>TRIAL</span></a></li>
<li><a href="#" title="Links"><span>JUST ARRIVED</span></a></li>
<li><a href="about-us.html" title="Links"><span>ABOUT</span></a></li>
</ul>
</div><!--menu-top-->
</div>


------
warm regards
DA

 

It would be really helpful if you have a page online

 

Also help if it wasn't a double post...
http://forums.digitalpoint.com/showthread.php?t=416195