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?