Menu déroulant
Résolu
youssef.allmlg
Messages postés
48
Statut
Membre
-
youssef.allmlg Messages postés 48 Statut Membre -
youssef.allmlg Messages postés 48 Statut Membre -
Bonjour,
Sur mon site, j'ai une boîte que lorsque je mets ma souris dessus, un menu déroulant s'affiche à la suite. Seulement, je ne sais pas comment faire en Javascript ou CSS. Mon est:
Je veux que lorsque je mets la souris sur le bouton «Lang», les boutons «Fr» et «En» s'affichent.
J'ai déjà essayé en CSS:
mais ça ne fonctionne évidemment pas. Je crois que la seule façon est d'utiliser Javascript.
Quelqu'un peut m'aider?
Merci d'avance!
Sur mon site, j'ai une boîte que lorsque je mets ma souris dessus, un menu déroulant s'affiche à la suite. Seulement, je ne sais pas comment faire en Javascript ou CSS. Mon est:
<div>
<ul id="lang-selection">
<a href=""><li id="lang-button">Lang</li></a>
<a href="fr/hosting"><li class="dropdown" style="border-bottom: none;">Fr</li></a>
<a href="en/hosting"><li class="dropdown">En</li></a>
</ul>
</div>
<style>
#lang-selection {width: 60px;
text-align: center;
font-size: 12pt;}
#lang-button {list-style-type: none;
padding-right: 18px;
background: url([http://potato.96.lt/dropdown.png)] no-repeat top right;
background-color: #f7b900;
color: black;
text-decoration: none;}
:hover#lang-button {background-color: #f4ca5a;}
.dropdown {display: none;
list-style-type:none;
border: 1px solid #f7b900;
color: black;
text-decoration: none;}
:hover.dropdown {background-color: #f7b900;
border-top: 1px solid #fdee00;}
</style>
Je veux que lorsque je mets la souris sur le bouton «Lang», les boutons «Fr» et «En» s'affichent.
J'ai déjà essayé en CSS:
:hover#lang-button {
.dropdown {display: normal;}
}
mais ça ne fonctionne évidemment pas. Je crois que la seule façon est d'utiliser Javascript.
Quelqu'un peut m'aider?
Merci d'avance!
1 réponse
-
Salut,
Pour commencer tu as quelques erreurs dans ton code html et javascript.
1. Les balises <li> doivent être des enfants directes de la balises <ul>. Tes balises <a> doivent donc être placée dans la balise <li>. Exemple :<ul id="lang-selection"> <li id="lang-button"><a href="">Lang</a></li> </ul>
2. La pseudo classe :hover doit être placée après le sélecteur css. Par exemple pour cibler le hover de l'élément #lang-button :#lang-button:hover { /* règles css */ }
3. Tu ne peux pas ajouter de sélecteur dans un bloc contenant des règles css ::hover#lang-button { .dropdown {display: normal;} }
Ici tu essayes de cibler l'élément dropdown à partir de l'élément #lang-button, ceci est syntaxiquement incorrect (revoir sélecteur css).
4. La valeur 'normal' n'existe pas pour la propriété display. Tu trouveras ici la liste des valeurs possibles : https://www.w3schools.com/cssref/pr_class_display.asp
Après avoir corriger ces erreurs, je te propose une nouvelle structure html pour la construction du sous-menu :<div> <ul id="lang-selection"> <li id="lang-button"><a href="">Lang</a></li> <li class="dropdown"> <ul> <li style="border-bottom: none;"><a href="fr/hosting">Fr</a></li> <li ><a href="en/hosting">En</a></li> </ul> </li> </ul> </div>
-> Le sous menu est encadré dans un unique <li class="dropdown">
A partir de cette structure, il suffit d'afficher (display: block;) le <li class="dowdown"> qui est le frère de l'élément <li id="lang-button"> (dont le sélecteur css #lang-button:hover + .dropdown) :#lang-selection {width: 60px; text-align: center; font-size: 12pt;} #lang-button {list-style-type: none; padding-right: 18px; background: url('http://potato.96.lt/dropdown.png') no-repeat top right; background-color: #f7b900; color: black; text-decoration: none;} #lang-button:hover {background-color: #f4ca5a;} .dropdown {display: none; list-style-type:none; border: 1px solid #f7b900; color: black; text-decoration: none;} .dropdown:hover {background-color: #f7b900; border-top: 1px solid #fdee00;} /* on affiche le sous menu quand la souris passe #lang-button et quand la souris est sur le sous menu */ #lang-button:hover + .dropdown, .dropdown:hover { display: block; }
Bonne journée
