how to make menu hover disappear when clicking a link

Hello,

Here on my website https://www.collectifsaga.com/X/wordpress/fr/home-fr/ , I have a menu on hover.
In the menu, there is some filters (architecture, news …) to reorganize the grid (displaying the posts).
The problem is when I click on a filter, I would like the menu disappear. It’s a small thing, but to have a clean webpage when I select a filter I would like to have only the logo at the top and the the grid with a few elements and not the menu.

Of course the menu disappear when the mouse is out of it, but I would like it disappears right after clicking on a filter.

Do you have an idea how to make it ?

Here is my CSS:

#nav, #nav ul {
   align-text: left;
   list-style: none;
   max-height: fit-content;
} 

#nav a {
   display: inline-block;
} 

#nav a:hover {
   display: inline-block;
} 

#nav li {
   float: left;
}

#nav li ul {
   position: absolute;
   left: -999em;
} 

#nav li:hover ul {
   left: auto;
}

#nav li:hover ul, #nav li.sfhover ul {
   left: auto;
}

And the same on mobile devices

Thanks a lot for your help : )