28172 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai mis en place un menu déroulant vertical avec au survol des elements du menu et des sous-menus une coloration (en l'occurence orange).
J'aimerais lorsque je survole un sous-menu, que le menu correspondant reste coloré.
Comment faire?

Merci beaucoup de votre aide


Voici les codes HTML et CSS du menu

<div id="menu">
		<ul>
						<li class="current_page_item"><a href="index.html">Accueil</a></li>
						<li><a href="presentation.html">Qui sommes-nous ? </a>
						<ul class="sous-menu">
								<li> <a href="quiSommesNous.html"> Qui sommes-nous? </a></li>
								<li> <a href="notreConcept.html"> Notre concept </a></li>
								<li> <a href="nosValeurs.html"> Nos valeurs </a></li>
						</ul>
						</li>
						<li><a href="polygonum.html">Le polygonum </a>
						<ul class="sous-menu">
								<li> <a href="originePoly.html"> Les origines du polygonum </a></li>
								<li> <a href="composantsPoly.html"> Les composants du polygonum </a></li>
						</ul>
						</li>
						<li><a href="http://www.moraz.fr/pages/Produit02SoinPeau.php" target="_blank">Commander le produit </a></li>
						<li><a href="contact.html">Nous contacter</a></li>
						<li class="last"><a href="http://www.moraz.fr" target="_blank">Nos autres produits</a></li>
 
 
		</ul>
		<br/><br/>
	</div>



 
#menu {
background-color : #FFFFF3;
width : 1000px;
margin : auto;
}
 
#menu ul {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px;
	list-style: none;
	line-height: normal;
	text-align: center;
}
 
#menu li {
	display: inline-block;
}
 
#menu a {
	display: block;
	padding: 11px 14px 11px 14px;
	background-color : rgb(123, 143, 56);
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	font-family: 'Oswald', arial narrow, sans-serif;
	font-size: 15px;
	font-weight: 200;
	color: #FFFFFF;
	border: none;
}
 
 
 
 
#menu .current_page_item a {
	background: rgb(246, 169,36);
	}
 
	/***********************Sous menu************************/
 
 
	#menu ul li li {
/* on enlève ce comportement pour les liens du sous menu */
    display: inherit;
}
#menu ul ul {
    position: absolute;
/* on cache les sous menus complètement sur la gauche */
    left: -999em;
}
 
#menu ul li:hover ul {
/* Au survol des li du menu on replace les sous menus */
    left: auto;
		}
 
#menu a:hover {
	background: rgb(246, 169,36);
}	
#menu ul li ul li:hover a{
background : black;
}