Making a rollover stick when clicked

I’m having a problem with my side navigation bar. I’m using background and text to do it. I’ve got my green buttons to rollover to dark green when I mouseover. I would like if, when the button was clicked on, the button stayed dark green (until the next button is clicked at which time it would be green again).

I’ve tried (see below) to use a:active {… and a:focus {… to do this and it doesn’t do what I would like it to.

You can’t see this problem on the web (because it’s not there) but I’ve included my html and my css code in the hopes that someone might be able to help me.

Cheers!

<div id="sidenav">
Home
Where is?
Tourism
Municipal Government Information
News/Reports
</div>

/* Side Navigation*/

#sidenav a {
font-family: "Impact";
font-size: 15px;
color:#FFFFFF;
width:180px;
border-bottom: solid;
background:green;
text-align:left;
margin-top:0px;
padding:3px;
display:block;
text-decoration:none;
}
#sidenav a:hover {
background:#004B18;
color:#FFFFFF;
}
#sidenav a:focus {
background:#004B18;
color:#FFFFFF;
}
#sidenav a:active {
background:#004B18;
color:#FFFFFF;
}

yeah, i have had the same problem doing it this way. Honestly, I find it a lot easier just to put the clicked button on the page you just clicked on.

Yes...that's a good idea! Thanks very much!

Your welcome :wink:

Yeah, unless you're using frames the easiest thing is to just hard code the button as clicked. Other than doing something more complex with a server side script.