Bonjour je n' arrive pas à faire à apparaitre mes 2 sous menus, je ne comprends pas mon erreur.

j' ai bien mis display:block au hover sur le a mais ça ne s'affiche pas.

 https://jsfiddle.net/primitik/yehwvzpy/11/

Merci d' avance car je bloque

Bonjour,

Pour les mobiles et tablettes qui ne fonctionnent pas avec une souris, il faut rajouter aussi la pseudo-classe :active ou la pseudo-classe :focus en plus de :hover qui ne fonctionne que dans le cas où il y a une souris.

Ensuite, hover, comme active et focus, en css, ne fonctionne que lorsque la pseudo-classe prend effet. Une fois que tu ne pointes plus ou ne cliques plus sur le menu,  il disparaît. Pour qu'il reste visible même après avoir pointé ou cliqué dessus, il faut utiliser le javascript. Css sert à la présentation, javascript sert à l'interaction, du moins au début de son existence, avant la création de frameworks js tel que jquery et maintenant un environnement serveur node.js. 

Bonjour,

.dropbtn:hover .dropdown-content {
    display: block;
}

<li><a href ="#" class="dropbtn">Menu2</a>

<ul class="dropdown-content">...<ul>

Le .dropdown-content ne se trouve pas dans .dropbtn, la règle CSS est donc mauvaise.

Tu peux résoudre le problème simplement en mettant la classe "dropbtn" sur le li parent.

-
Edité par Syltaen 12 avril 2018 à 7:32:33

Merci pour vous réponses avec du retard, oui la classe dropbtn se trouvait dans le <a> au lieu du <li> parent

erreur de débutant et d'inattention.

Pour le responsive avec :focus et :active en effet je l'ai vu aujourd'hui en analysant le css d'un template wordpress.

-
Edité par thomas4437 9 août 2018 à 0:01:28

Bonjour,

Sujet résolu