Sous-menu dans menu Hamburger

Bonjour,

Par flemme, je le reconnais, j'ai utilisé, dans un site que je suis en train de concevoir, un menu extrait d'un template, dont le menu hambuger en version mobile est lancé via le script javascript suivant :

(() => {const ul = document.querySelector('.header-nav-lists');

const hamburger = document.querySelector('.header-hamburger-icon');

hamburger.addEventListener('click', () => {
ul.classList.toggle('show');
hamburger.classList.toggle('show');
})})()

Jusque là tout fonctionnait bien quelle que soit la taille d'écran.

J'ai voulu ajouter un sous-menu à ce menu et, si le menu fonctionne toujours bien dans le format "ordinateur, il n'en est pas de même en format mobile. Le menu s'affiche bien lorsque je clique sur le hamburger mais le sous-menu n'apparaît pas alors qu'il est bien présent, j'ai vérifié avec l'inspecteur de Firefox.

Je suppose donc qu'il s'agit d'un problème au niveau du script javascript du hamburger, mais je n'y connais rien en javascript. J'ai bien essayé de m'y mettre mais mon cerveau de septuagénaire n'y arrive pas.

Mon code html :

<nav class="header-nav-bar">
   <div class="header-nav-logo"><a href="index.php"><img src="image/logo.png" alt="logo"></a></div>
                 
<ul class="header-nav-lists">
	<li class="header-nav-list"><a class="header-nav-link header-active" href="index.php">Accueil</a></li> 
    
	<li class="header-nav-list deroulant"><a href="#">Gîte</a>
    
   		<ul class="sous">
			<li><a class="header-nav-link" href="details.php">Présentation</a></li>
			<li"><a "header-nav-link" href="interieur.php">Intérieur</a></li>
			<li><a "header-nav-link" href="exterieur.php">Extérieur</a></li>
		</ul>
	</li> 
    
<li class="header-nav-list"><a class="header-nav-link" href="tarifs.php">Tarifs</a></li>
<li class="header-nav-list"><a class="header-nav-link" href="visiter.php">A visiter</a></li>
<li class="header-nav-list"><a class="header-nav-link" href="reserver.php">Réserver</a></li>
<li class="header-nav-list"><a class="header-nav-link" href="contact.php">Contact</a></li>
                        </ul>
                        
            <div class="header-hamburger-icon">
               <div class="header-hamburger-line-1"></div>
               <div class="header-hamburger-line-2"></div>
               <div class="header-hamburger-line-3"></div>
            </div>
                             
                    </div> 
                </nav>

Par avance, merci de l'aide qui me sera apportée.

Bien cordialement,

Patricia
Macintosh / Firefox 78.0