Menu déroulant et coloration en CSS

Fermé
hansou0208 Messages postés 2 Date d'inscription lundi 12 novembre 2012 Statut Membre Dernière intervention 12 novembre 2012 - 12 nov. 2012 à 15:16
tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 - 12 nov. 2012 à 17:26
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 de votre aide.

Voici mes codes HTML et CSS.

HTML
<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="https://www.moraz.fr/6-baume-reparateur" target="_blank">Commander le produit </a></li>
						<li><a href="contact.html">Nous contacter</a></li>
						<li class="last"><a href="https://www.moraz.fr/" target="_blank">Nos autres produits</a></li>
						
		
		</ul>
		<br/><br/>
	</div>



CSS

#menu a:hover {
	background: rgb(246, 169,36);
}	

#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 ul li ul li:hover a{
background : black;
}
A voir également:

1 réponse

tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 220
12 nov. 2012 à 17:26
Salut,

Je pense qu'il faut utiliser du Javascript et la fonction onmouseout et onmouseover mais je peut me planter ...

On associe un id unique pour chaque menu. Pour chaque "li" du sous-menu correspondant on attribue une fonction Javascript sur"onmouseout" et "onmouseover".
<ul>
  <li class="current_page_item"><a href="index.html">Accueil</a></li>
  <li><a id="aa" href="presentation.html">Qui sommes-nous ? </a>
    <ul class="sous-menu">
      <li onmouseover="changecouleur('aa');" onmouseout="normal('aa');"> <a href="quiSommesNous.html"> Qui
sommes-nous? </a></li>
      <li onmouseover="changecouleur('aa');" onmouseout="normal('aa');"> <a href="notreConcept.html"> Notre
concept </a></li>
      <li onmouseover="changecouleur('aa');" onmouseout="normal('aa');""> <a href="nosValeurs.html"> Nos valeurs </a></li>
    </ul>
  </li>
  <li><a id="bb" href="polygonum.html">Le polygonum </a>
    <ul class="sous-menu">
      <li onmouseover="changecouleur('bb');" onmouseout="normal('bb');"> <a href="originePoly.html"> Les origines
du polygonum </a></li>
      <li onmouseover="changecouleur('bb');" onmouseout="normal('bb');"> <a href="composantsPoly.html"> Les
composants du polygonum </a></li>
    </ul>
  </li>
  <li><a href="https://www.moraz.fr/6-baume-reparateur" target="_blank">Commander le produit </a></li>
  <li><a href="contact.html">Nous contacter</a></li>
  <li class="last"><a href="https://www.moraz.fr/" target="_blank">Nos autres produits</a></li>
</ul>


Les 2 fonctions :
function changecouleur(id){
var couleur = document.getElementById(id);
couleur.style.background="rgb(246, 169,36)";
}
function normal(id){
var couleur = document.getElementById(id);
couleur.style.background="rgb(123, 143, 56)";
}

La première fonction change la couleur de fond du menu correspondant au sous menu survolé. La seconde fonction rétablie la couleur d'origine.
0