I'm working on a page based on the [URL=http://webhost.bridgew.edu/etribou/layouts/]Ruthsarian layout[URL] "Two Columns with Footer".

Here's a snippet of HTML from the side menu (all tags do close, this is just a snippet):

HTML Code:
					<div id="rightColumn">
						<div class="inside">
<div class="vnav">
	<h3>About Us</h3>
	<ul><li><a 
		href="index.html">History and Purpose</a></li><li><a 
		href="index.html">Members of the Group</a></li><li><a class="current"
		href="index.html" onclick="JavaScript:return false;">Calvary Baptist Church</a></li></ul>
</div>
You'll notice the last link is disabled via script. My plan is to have server-side code that would determine what section someone is currently using and disable that section's link. But I want that link to show up looking differently so it will be distinguished. I know I could have just used a span instead of an anchor, but I wanted the whole menu to degrade as links in a non-CSS browser.

Here's some of the CSS I have applied to links right now:
Code:
#rightColumn .vnav ul li a:hover, .vnav ul li a:hover
{
	background-color: #248;
	color: #fff;
}
#rightColumn .vnav ul li a
{
	color: #336;
	background-color: #bcd;
}
My problem is that for the life of me I can't figure out a way to change that one link's colors. I've tried creating a new class, applying to just about every tag (or creating new ones) - nothing seems to work. The only thing that halfway worked was a span inside the anchor, but since I have margins on the anchors it didn't cover the whole "box", just the text.

Any help on getting this to work would be greatly appreciated! Like I said, I've tried everything I can think of, but the vnav CSS keeps overriding my changes.