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
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;
}