Menu déroulant
Résolu/Fermé
youssef.allmlg
Messages postés
44
Date d'inscription
samedi 25 avril 2015
Statut
Membre
Dernière intervention
2 janvier 2016
-
Modifié par youssef.allmlg le 31/08/2015 à 13:50
youssef.allmlg Messages postés 44 Date d'inscription samedi 25 avril 2015 Statut Membre Dernière intervention 2 janvier 2016 - 7 sept. 2015 à 00:08
youssef.allmlg Messages postés 44 Date d'inscription samedi 25 avril 2015 Statut Membre Dernière intervention 2 janvier 2016 - 7 sept. 2015 à 00:08
A voir également:
- Menu déroulant
- Menu déroulant excel - Guide
- Excel menu déroulant en cascade - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
- Windows 11 menu démarrer classique - Guide
- Canon quick menu - Télécharger - Utilitaires
1 réponse
Pitet
Messages postés
2826
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
21 juillet 2022
525
Modifié par Pitet le 31/08/2015 à 17:07
Modifié par Pitet le 31/08/2015 à 17:07
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 :
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 :
3. Tu ne peux pas ajouter de sélecteur dans un bloc contenant des règles css :
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 :
-> 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) :
Bonne journée
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
31 août 2015 à 19:41
31 août 2015 à 19:54
1 sept. 2015 à 14:24
7 sept. 2015 à 00:08