Cambiar color a elemento menu seleccionado...

Viejo aquí estoy de nuevo con un nuevo reto, mira el caso es que necesito cambiar el color del elemento actual seleccionado en un menu, he probado con css y en unos casos me funciona asignando dos clases diferentes pero en este ahora no me funciona, debe ser por la estructura del menu, no se, pero he visto que jquery, prototype o javascript puro puede hacerlo, dime alguna manera y un pequeño ejemplo que lo haga, mira aquí te envío la estructura del menu eleborado dinámicamente a partir de un foreach y las css que utilizo para que le eches un vistazo :
Echo '
<ul id="button">
';
                  }
                   echo "
<li><a href=\"servicio_es.php?idc=".$id_servicio."&id=".$esp."\">".$nomtiposerv."</a></li>
";                   
                   {
                   echo "
</ul>
";
css:
#button {
padding: 0;
}
#button ul{
}
#button li {
list-style-image:url(../images/marker_menu.jpg);
list-style-position:inside;
list-style-type:none;
position:relative;
margin-left:0px;
}
#button li a {
padding-top:8px;
padding-bottom:8px;
height:10px;
font-family:Arial, Helvetica, sans-serif;
text-decoration: none;
padding: 4px;
color: #005763;
font-weight:bold;
position:relative;
/*background-image:url(../images/splitter_banner_menu.jpg);
background-position:left;
background-repeat:no-repeat;*/
}
#button li a:hover {
color:#c9a300;
padding-bottom:8px;
text-decoration:none;
font-weight:bold;
}
#button li a:visited {
padding-bottom:8px;
text-decoration:none;
}
y esta seria igual pero con el color del li a diferente
#but {
padding: 0;
}
...
#but li a {
padding-top:8px;
padding-bottom:8px;
height:10px;
font-family:Arial, Helvetica, sans-serif;
text-decoration: none;
padding: 4px;
color: #c9a300;
font-weight:bold;
position:relative;
/*background-image:url(../images/splitter_banner_menu.jpg);
background-position:left;
background-repeat:no-repeat;*/
}
...
Bueno amigo espero que entiendas este enredo.