Menu déroulant HTML CSS

Bonjour je reviens avec mon menu pour demander un peu d'aide.

Je souhaiterai utiliser le "current " avec différentes couleurs sur le menu déroulant

- en 1 il faut que le visiteur sache que sa page est bien voyage donc sera de couleur vert
- en 2 les sous menu doivent rester de la couleur de fond général (donc bleu) sauf au passage souris ou il deviennent orange démontrant ainsi que le visiteur n'est pas sur une page sous menu mais bien juste dans le menu "voyage"
- en 3 si le visiteur clique sur le sous menu "TIC" alors la page s'affichant montrera le menu voyage vert, les autres sous menu restent inerte et sans couleurs (donc bleu) et le menu TIC sera par exemple rouge

J'ai essayé d'isolé la partie menu déroulant en lui mettant une "class b" et une "class c". Mais ça veut pas fonctionner.

Merci par avance pour votre aide


CODE HTML

<div id="menu_cadre">
<div id="menu">
<ul>
  	<li><a href="index.html">Accueil</a></li>
  	<li><a href="qui.html">Qui sommes nous ?</a></li>
	<li  class="b current"><a>voyage</a>   	
  		<ul>
            <li class="c current"><a href="cb.html">tic</a></li>
      		<li class="c"><a href="cb.html">tac</a></li>
      		<li class="c"><a href="cc.html">toc</a></li>
            <li class="c"><a href="cd.html">zer</a></li>
    	</ul>
	</li>
	<li><a href="indesud.html">le jus d'orange</a></li> 
	<li><a href="photos.html">Photos</a></li> 
	<li><a href="contacts.html">Contacts</a></li> 
</ul>
</div>
</div>

CODE CSS

/*MENU DU SITE*/

#menu_cadre {
	background-color:#000033;
	width: 1000px;
	height: 32px;
	margin-bottom: 10px;
}
#menu{
	background-color:#000033;
	clip: rect(auto,auto,auto,auto);
	padding-left: 50px;
  }
#menu ul {
	margin:0;
	list-style-type:none;
	text-align:center;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
 }
#menu li {
	float:left;
	width: 150px;
 }
#menu li a {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	display:block;
	color:#fff;
	font-size:0.7em;
	font-weight:bold;
	text-decoration:none;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
	cursor:pointer;
	padding-top: 6px;
	padding-right: 10px;
	padding-bottom: 6px;
	padding-left: 10px;
	margin-top: 3px;
 }
 
#menu li.current a { 
 background-color:#77b800;
  } 
#menu li a:hover {
 background-color:#FF9900;
 }
#menu  li.b {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	display:block;
	color:#fff;
	font-size:1em;
	font-weight:bold;
	text-decoration:none;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
	cursor:pointer;
 }

#menu li.current b { 
 background-color:#77b800;
  } 
  
 #menu li.c {
	display:block;
	color:#fff;
	font-size:1em;
	font-weight:bold;
	text-decoration:none;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
	cursor:pointer;
 }

#menu li.current c { 
 background-color:#f83711;
  } 

#menu ul li ul {
 z-index: 2;
 display:none;
 background-color:#000033;
 }
#menu ul li:hover ul {
 display:block;
 }
#menu li:hover ul li {
 float:none;
 }
#menu li ul {
 position:absolute;
 }