Menu com múltiplas cores e diferentes bg.

Caros colegas, estou tendo problemas na criação de um menu com diferentes cores: o primeiro item deveria ter a cor da fonte azul na condição a:link e a:visited e um azul claro na condição a:hover, o segundo item deveria ter a cor verde e e verde claro com o a:hover e assim sucessivamente. O background-image deveria alterar-se tbm com a condição a:hover, segue o código css que escrevi até agora.

html</div> <div id="master_content_left"> <div id="menu_left"> <ul> <li class="como"><a class="como" href="como.htm">Como?</a></li> <li class="onde"><a href="onde.htm">Onde?</a></li> <li class="porque"><a href="porque.htm">Porque Fazer?</a></li> <li class="parceiros"><a href="parceiros.thm">Parceiros</a></li> </ul> </div> </div>

e o código CSS

#master_content_left { background-image: url(../images/content_page_left.jpg); background-repeat: no-repeat; background-position: left top; float: left; height: auto; width: 200px; position:relative; clear:both; margin: 0px; padding: 0px;}#menu_left { width: 180px; height: auto; margin-top: 220px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding: 0px; float: right; }#menu_left ul { margin:0; text-align:right; display:block; text-decoration:none; list-style-type: none;}#menu_left ul li { background-image: url(../images/flip_menu_off.jpg); background-repeat: no-repeat; font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 12px; padding-right: 15px; padding-top: 14px; padding-left: 0; padding-bottom: 18px; text-decoration:none;}.como a:link, a:visited { color: #0071FF; background-repeat: no-repeat; background-position: right top;}.como a:hover, a:active { color:#2ECFD6; background-image:url(../images/flip_menu_on.jpg); background-repeat:no-repeat; background-position: right top;}.onde a:link, a:visited { color:#75A27E;}.onde a:hover, a:active { color:#00A224; background-image:url(../images/flip_menu_on.jpg); background-repeat:no-repeat; background-position: right top;}.porque a:link, a:visited { color:#A1322D;}.porque a:hover, a:active { color:#FF4E48; background-image:url(../images/flip_menu_on.jpg); background-repeat:no-repeat; background-position: right top;}.parceiros a:link, a:visited { color:#B79C00;}.parceiros a:hover, a:active { color:#EBC801; background-image:url(../images/flip_menu_on.jpg); background-repeat:no-repeat; background-position: right top;}

agradeço desde já quem puder me ajudar com esse problema.Abs,Xtremac