This is the site http://ticktach.com Notice the news source buttons at the bottom, if you click on one you will see the selected border appear around it, I would like instead for the highlight to stay...

This is my css that I thought should accomplish this...

.nav ul li a:hover 
{ 
    background:url(../images/bg_nav_left.png) no-repeat;
    color:#000;
    text-decoration:none;
}

.nav ul li a:hover span 
{
    background:url(../images/bg_nav_right.png) no-repeat top right;
}

.nav ul li a.selected 
{ 
    background:url(../images/bg_nav_left.png) no-repeat; 
    color:#000; 
    text-decoration:none;
}

.nav ul li a.selected span 
{
    background:url(../images/bg_nav_right.png) no-repeat top right;
}

Can anyone tell me why this is not working?

and how do you set the class selected on the element?

<div id = "extension" class = "nav">
                 <ul>
                    <li><a href = # onclick = "searchrequest('News','site:barrons.com',10);"><span>Barrons</span></a></li>
                    <li><a href = # onclick = "searchrequest('News','site:bloomberg.com',10);"><span>Bloomberg</span></a></li>
                    <li><a href = # onclick = "searchrequest('News','site:reuters.com',10);"><span>Reuters</span></a></li>                        
                    <li><a href = # onclick = "searchrequest('News','site:wsj.com',10);"><span>WSJ</span></a></li>
                    <li><a href = # onclick = "searchrequest('News','site:smartmoney.com',10);"><span>Smart Money</span></a></li>
                    <li><a href = # onclick = "searchrequest('News','site:moneycentral.msn.com',10);"><span>MSN Money</span></a></li>
                    <li><a href = # onclick = "searchrequest('News','site:marketwatch.com',10);"><span>Market Watch</span></a></li>
                    <li><a href = # onclick = "searchrequest('News','site:cnbc.com',10);"><span>CNBC</span></a></li>
                    <li><a href = # onclick = "searchrequest('News','site:msnbc.com',10);"><span>MSNBC</span></a></li>
                </ul>
            </div>

I believe you are saying I need to change the class of the a tag to "selected"?
I thought that it was a property...

OK, now my head hurts... The "selected" element displays a dashed border, what css property is responsible for that?
Yeah, ok "focus"... so that won't work anyway... Anybody got a link to get me through this little boondoggle?

.selected is NOT a property at all, it is a class that YOU define.

As for the dotted outline, it is there for accessibility purposes and you should not remove it.

Ah, I remove the dotted outline on some things.

Only things like linked images where it goes all the way across the page or links that look bad when you click them.

It might look bad to you - you can see! For someone using assistive technology, like the blind, you are disabling functionality.