How do I Highlight the Active Tab (from my template)
 

I know very little about CSS code and building websites. But I've been able to figure out a bit and change my website that started with a GoDaddy template. Because I haven't built the whole thing I'm having trouble figuring out how to change the color of the current tab. I was able to use the active code to change the color when you click on it but then I'd like it to stay highlighted. Any help is appreciated. I understand if this is too elementary to respond to. Here's the code in my template:

.sf_navigation_top {
clear: both;
height: auto;
margin: 50px 0px 0px 0px;
width: 950px;
background-color: #666666;
position: absolute;
text-align: right;
}

.sf_navigation_top ul {
margin: 0 0px 0 0px;
height: 1%;
padding-left: 0;
list-style-type: none;
}

.sf_navigation_top ul:after {
content: ".";
display: block;
visibility: visible;
height: 0;
font-size: 1px;
clear: both;
}

.sf_navigation_top ul li {
width: auto !important;
width: 5px;
white-space: nowrap;
float:left;
}

.sf_navigation_top ul li.sf_last_nav_item {
}

.sf_navigation_top ul li.sf_first_nav_item {
}

.sf_navigation_top ul li a {
text-decoration: none;
display: block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
font-style: normal;
font-variant: normal;
text-transform: none;
padding: 10px 19px 10px 19px;
}


.sf_navigation_top ul li a:visited {
}

.sf_navigation_top ul li a:hover {
background-color: #424242;
color: #ffffff;
}

.sf_navigation_top ul li a:active {
background-color: #000000;
color: #ffffff;
}


THANK YOU!

You can assign a class to the <a> tag when it is the "current" page. You can even assign multiple classes to a single element in the HTML if you need to. Then you just make a CSS rule to style up the "current" link. It can be done any number of ways, but in its most basic form it might look something like this:

HTML:

CSS:
If you can provide a link to your test page I can provide a more specific answer to the question.