Comment régler le sous-menu rétractable uniquement sur le menu réduit (aka sur les appareils mobiles)

Question

Bonjour à tous et merci de lire ceci!

Je suis en train, mais à défaut d'obtenir ce que je veux, j'ai cette barre de navigation:

code 

https://jsfiddle.net/x4mcq4h7/17/

et je suis en train de comprendre comment peut faire le sous-menu « yogastyles » pour être un menu rétractable lorsqu'il est visualisé sur des appareils mobiles?

Lorsqu'elle est affichée sur un téléphone (barre de navigation réduite), vous ne pouvez pas accéder au sous-menu "yogastyles" puisque le clic du menu parent vous amène à une page.

Je sais que sur les requêtes des médias, mais je ne sais pas comment atteindre tout cela, j'ai un script js qui ajoute & supprime une classe, mais je ne peux pas le faire fonctionner en même temps que le sous-menu hoverable je l'ai déjà ...

J'espère que je l'ai fait assez bien, demandez si ce n'est pas le cas.

Cordialement!

Answer 1

Je ne peux pas voir yogastyles sur le bureau soit

EDIT: Je l'ai regardé plus. .dropdown-content a un arrière-plan semi-transparent qui le rend difficile à voir. Essayez de donner une requête média comme

@media (max-width: 767px) { 
    .dropdown-content { 
     background: #fff; 
    } 
}