Bonjour à tous !

J'espère que quelqu'un pourra m'aider, ça fait 4 jours que je suis dessus...
Je viens tout juste de commencer un projet en Responsive et je suis débutante sur TOUT les langages en plus

J'essaie de faire une barre de navigation avec une liste ul> li>/Li> ul> & l'activer avec du JS pour dérouler le sous-menu, mais ça ne marche pas comme je voudrais.
J'ai essayé avec "addeventlistener" avec un "click", ça marche mais est-ce que le click marche également sur tablette & mobile ? 0.o....

Mon but était pouvoir ouvrir la catégorie "atelier & formation" & si l'utilisateur sort du menu + sous-menu, le sous-menu finit par disparaitre.

DSL d'avance si c'est mal expliquer ! :/ (Je ne suis pas très douée)

Voici mes codes:
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<nav>
      <ul>
        <li><a href="index.html"><i class="fas fa-home"></i>Accueil</a></li>
        <li><a href="#"><i class="fas fa-newspaper"></i>Actualité</a></li>
        <!-- <li id="ateliers"><a href="#"><i class="fas fa-graduation-cap"></i>Ateliers & Formations</a> -->
        <li id="ateliers"><a href="#"><i class="fas fa-graduation-cap"></i>Ateliers & Formations</a>
          <div class="menu hidden" id="affiche">
            <div class="sousmenu">
              <h2>Ateliers</h2>
              <ul>
                <li><a href="http://www.alis44.org/spip.php?article61">Catch the Bullet</a></li>
                <li><a href="#">Snoopy</a></li>
                <li><a href="#">Fallen</a></li>
                <li><a href="#">Sui</a></li>
                <li><a href="#">Wave</a></li>
                <li><a href="#">Golf</a></li>
              </ul>
            </div>
            <div class="sousmenu">
              <h2>Formations</h2>
              <ul>
                <li><a href="#">Gadget</a></li>
                <li><a href="#">Green</a></li>
                <li><a href="#">Green Tree</a></li>
                <li><a href="#">Green Tree</a></li>
                <li><a href="#">Wobbler</a></li>
              </ul>
            </div>
          </div>
        </li>
        <li><a href="https://www.asso-linux.org/forum/" target="_blank"><i class="fas fa-users"></i>Forum Asso-Linux</a></li>
        <li><a href="tarifs.html"><i class="fas fa-address-card"></i>Nos tarifs</a></li>
        <li><a href="contact.html"><i class="fas fa-envelope"></i>Contactez nous!</a></li>
      </ul>
    </nav>

Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
.menu {
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
	color: white;
}
.menu ul {
	padding: 0;
}
.menu a {
	color: white;
}
.hidden {
	display: none;
}
.sousmenu {
	display: inline-block;
	vertical-align: top;
	margin: 0 100px;
}
#affiche{
	background-color: rgba(0, 154, 43, 0.8);
	border: 1px solid black;
}

Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
 
document.querySelector("#ateliers").addEventListener("click", onClickAteliers);
//document.querySelector("#ateliers").addEventListener("mouseout", onOutAteliers);
function onClickAteliers(evt)
{
    console.log('ok');
    var affiche = document.querySelector("#affiche");
    affiche.classList.toggle("hidden");
    evt.preventDefault();
 
}