Barre de navigation (liste) en JS

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 :x

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:

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:

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:

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();
 
}