Come da titolo, questo è quello che mi accade: ho un menu di navigazione con il sub-menu che appare e scompare al passaggio del mouse con effetto dissolvenza.

Posto un codice puramente esemplificativo, che però ha il medesimo meccanismo di funzionamento del mio:

codice:

<style>
.pulsante {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}


.menu {
  position: relative;
  display: inline-block;
}


.sub-menu {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  z-index: 1;
}


.sub-menu a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}


.sub-menu a:hover {background-color: #ddd;}


.menu:hover .sub-menu {
  opacity: 1;
  visibility: visible;
}






</style>


<div class="menu">
  <button class="pulsante">Dropdown</button>
  <div class="sub-menu">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
Il problema che si verifica è il seguente: quando clicco su una delle voci del sub-menu, vengo naturalmente dirottato sulla pagina corrispondente al link cliccato.Tuttavia se da quella pagina premo nel browser il pulsante "indietro", mi ritrovo con il sub-menu aperto (come lo avevo lasciato al momento in cui ho cliccato sul link). Si richiude correttamente quando con il mouse passo dal pulsante indietro a qualsiasi punto della pagina web.

Riscontravo con stesso problema con il menu js...così ho deciso di passareal css, ma non è cambiato niente, il problema persiste.

Vi viene in mente una soluzione per risolverlo?