change color of menu item when on sub-menu page

I am building a site in WordPress using Starkers theme. I have used html to code the main and sub navigations and styled in css. What I am needing to do is make each of the main nav links to change color when on their page and for the parent of the sub menu to be a different color when on their pages. I have tried using current-menu-item and current-parent-item etc but none work. Any ideas??? http://page12.com.au/sample.html

My html
`<nav>
<ul>
<li class=”left1″><a href=”#”>home</a></li>
<li class=”center”><a href=”#”>folio</a>
<ul>
<li><a href=”#”>brand</a></li>
<li><a href=”#”>identity</a></li>
<li><a href=”#”>exhibition</a></li>
<li><a href=”#>illustration</a></li>
<li><a href=”#”>philatelic</a></li>
<li><a href=”#”>publishing</a></li>
</ul>
</li>
<li class=”right”><a href=”#”>contact</a></li>
</ul>
</nav>`

CSS
`nav ul {
list-style: none;
font-size: 25px;
font-family: ‘HelveticaNeuel’;
color: rgb(146, 148, 151);
}

nav ul li {
display: block;
float: left;
margin-top: 40px;
font-family: ‘HelveticaNeuel’;
color: rgb(146, 148, 151);
}

/*position home, folio, contact */

nav ul li.right a {
margin-left: 600px;
}

nav ul li.left1 a {
margin-left: 20px;
}

nav ul li.center {
margin-left: 40px;
}

nav ul li a {
text-decoration: none;
font-family: ‘HelveticaNeuel’;
color: rgb(146, 148, 151);
}

nav a:hover {
color: rgb(164, 130, 46);
}

nav ul li ul {
display: none;
font-size: 15px;
padding: 10px;
width: 800px;
}

nav ul li:hover ul {
display: block;
position: absolute;
/*left: 0;*/
}

nav ul li ul li {
padding: 10px;
}`

Thanks,
Vicki