Thanks E Michael, but i was trying to avoid using scripts. Thanks

ok, I have been trying the code, and it works, sort of.

what I have is:

all of my links on the nav have a class, so
<li class="home"><a href="test.html">Home</li>

and then in the head of each page (which is editable) I have this:
<style type="text/css">
.home { background-color:#000000;}
.home a:link {color:#FFFFFF}
.home a:visited {color:#ffffff;}
</style>

however, the background-color is showing up nicely to tell me on that page,
but the text on the link won't change color...i'm sure its just my styles
clashing somewhere but i can't spot it..any thoughts? I attach the full menu
code

CSS

.menu {font-family: Calibri;height:51px;font-size:13px;z-index:100;width:
880px; padding: 0px;}
.menu ul {padding:0;margin:0;height:51px;list-style: none;}
.menu ul li {float:leftosition:relative;
}
.menu ul li ul {position:absolute; left:-9999px;}
.menu ul li a, .menu ul li a:visited
{display:block;background:transparent;text-decoration:none;color:#000000;width:1
40px;height:51px;text-align:center;line-height:51px;font-size:13px;overflow:hidd
enadding-top: 2px;}.menu ul li a:hover {color:#09467D;
white-space:normal;background-image:
url(../images/navOn.jpg);background-repeat: no-repeat;}
.menu ul li:hover > a {color:#09467D;
background: url(../images/navOn.jpg);
background-repeat: no-repeat;}
.menu ul :hover ul {top:51px;left:0;
width:140px;height:auto;border-right:0;
background:transparent;
}.menu ul :hover ul li {height:51px;
padding-top:0px;background:transparent url(transparent.gif);
}
.menu ul :hover ul li a {display:block; background:#7D7D7D; color:#000;
border:0;}.menu ul :hover ul li a:hover {color:#000; background-image: url();}

HTML:

<li class="home"><a href="test.html">Home</li>
<li class="two"><a href="test2.html">Cabanas</li>
<li><a href="#">Location</li>
<li><a href="#">Prices</li>
<li><a href="#">Contact Us</li>
<li><a href="#">Charters</li>
</ul>