Menu qui reste sur la page

Bonjour,

en mode mobile, j'ai un menu handburger en css/html. Le site est un "one page", les liens ne vont par conséquent que vers des ancres des parties de la page. Tout fonctionne bien, mais que quand j'ouvre ce menu et que je clique sur un lien, le bandeau déroulant reste affiché sur la page et gêne la lecture de ce qui est dessous. Seul un survol ou un toucher en dehors du menu le ferme, mais en mobile, ce n'est pas très ergonomique. Est-il possible qu'il se ferme automatiquement lorsque l'on clique sur un lien ? Au mieux, une checkbox ou une petit croix pour le fermer me conviendrait mais avec cette méthode, je n'arrive pas à cibler un élément de ce menu pour le fermer.
Je pourrais tout recommencer et faire un menu en JavaScript mais avant, y-a-t-il une solution ?
Le code :

<div class="monmenu">
           <ul>							
			<li>&#9776;
		<ul>
			<li> <a href="#goni" style="color:white">N'GONI</a>
			<li> <a href="#seve" style="color:white">SÈVE MONTANTE</a>
			<li> <a href="#3/4" style="color:white">TROIS TEMPS QUATRE</a>
			<li> <a href="#bala" style="color:white">BALA</a>
			<li> <a href="#valse" style="color:white">VALSE D'AUTOMNE</a>
			<li> <a href="#foot" style="color:white">INFOS</a>
			<li> <a href="Plan.html" style="color:white">PLAN DU SITE</a>
			<li> <a href="#" style="color:white">RETOURT HAUT</a>
		</ul>
	</li>
	</ul> 
	</div> 

.monmenu ul {
	animation:fadein .8s forwards ease;}

.monmenu {
	display:block;
	position:fixed;
	top:-1.2em;
	left:-1.4em;
	width:4em;	  
    	font-size:1.2em;}
li { 
    	display:block; 
    	position:relative;
    	top:26px;
    	width:120%;    
    	margin:0;   
    	-webkit-transition:1000ms;
    	transition-duration:5s;
    	background:rgba(255,255,0,0);}
li a {
    	display:block;
    	padding:6px;
    	font-size:1.2em;
    	text-decoration:none;}
li ul{
	display:none;
	position:relative;
    	top:35px;
    	left:0;
    	padding:0;}
li:hover > ul {
	display:inline;
	position:absolute;
	top:.4em;}
li ul li{
	display:block;
	width:18em;
	border-right:0;
	background:black;}

Merci de me proposer une solution.
Modifié par Bongota (18 May 2021 - 10:10)

Hello,

En théorie ça devrait fonctionner avec focus-within.

Tu peux tester quelque chose comme ça ?

.monmenu:focus-within > ul {
  display: none;
}

Merci,
j'étais juste en train de corriger deux mots sur mon post pour le rendre plus compréhensif quand j'ai vu ton message. Je vais tester de suite.

Non.., quand je clique sur un lien, ça supprime tout, le handburger aussi, et on ne va pas sur le lien de l'ancre.
Dans ma correction plus haut, j'ai précisé que je voulais faire disparaître la partie déroulante seulement, pas le handburger. Mon premier message n'avait peut-être pas été explicite à ce sujet.

Ceci

.monmenu:focus-within > ul li ul {
	animation:fadeout ease;}

fonctionne, mais pas au toucher tactile, uniquement à la souris, ce qui n'a aucun intérêt en mode mobile. Sous Firefox 68.7.
Alors, code hasardeux ou coup de chance ? C'est pourtant pas le problème du siècle.

Bongota a écrit :

Alors, code hasardeux ou coup de chance ? C'est pourtant pas le problème du siècle.

"Normalement" cela fonctionne aussi sur mobile, si l'élément visé est focusable (mais je n'ai malheureusement pas le temps de tester actuellement).

Sinon, au final tu te compliques la vie à tenter de le faire en CSS : c'est le boulot de JavaScript de gérer les comportements, donc celui du touch