[HTML] Menu a fisarmonica che non funziona in chrome

[marcellino247]

Ciao a tutti,
io volevo sostituire il menu laterale di un mio sito, che stava diventando troppo lungo, con un menu a fisarmonica, con voci e sottovoci.
questo è il codice che ho usato, modificandone uno trovato su un sito:

<ul class="mainmenu">
<li><a href="mappaDiMercatore.html" class="vocemenu">La mappa di Mercatore</a></li>
    <li><a href="" class="vocemenu"><em>Gladiator Kibernetes</em></a>
      <ul class="submenu">
        <li><a href="iGladiatori.html" class="vocemenu">I gladiatori</a></li>
      </ul>
    </li>
    <li><a href="" class="vocemenu"><em>Montagne spinte dal vento</em></a>
    <ul class="submenu">
        <li><a href="LeNaviVichinghe.html" class="vocemenu">Le navi vichinghe</a></li>
        <li><a href="AunIlVecchio.html" class="vocemenu">La leggenda di Re Aun</a></li>
        <li><a href="VichinghiFormaFisica.html" class="vocemenu">I vichinghi e la forma fisica</a></li>
      </ul>
    </li>
... eccetera.

con questo CSS:

/* make ALL links (main and submenu) have padding and background color */
.mainmenu a {
  display: block;
 /* background-color: #CCC; */
  text-decoration: none;
  padding: 10px;
  color: #000;
}

/* add hover behaviour */
.mainmenu a:hover {
    background-color: #EAEAEA;
}


/* when hovering over a .mainmenu item,
  display the submenu inside it.
  we're changing the submenu's max-height from 0 to 200px;
*/

.mainmenu li:hover .submenu {
  display: block;
  max-height: 500px;
}

/*
  we now overwrite the background-color for .submenu links only.
  CSS reads down the page, so code at the bottom will overwrite the code at the top.
*/

.submenu a {
  background-color: #D6D6D6;
}

/* hover behaviour for links inside .submenu */
.submenu a:hover {
  background-color: #B5B5B5    ;
}

/* this is the initial state of all submenus.
  we set it to max-height: 0, and hide the overflowed content.
*/
.submenu {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 0.5s ease-out;
}

.vocemenu {
        border-left : 2px ridge #999;
        border-right: 2px ridge #999;
        border-bottom:  1px ridge #999;
        border-top: 1px ridge #999;
}

Il menu funziona correttamente su Edge e Maxthon, ma NON funziona su Chrome, dove mostra solo un mero elenco di voci, come se non leggesse il CSS.
La particolarità: su Chrome non funziona se io cerco di visualizzare la pagina pubblicata, ma se io da DreamWeaver faccio "visualizza anteprima in chrome"... funziona perfettamente! E' solo la versione online che non va! Eppure tutto il resto che ho implementato in CSS funziona regolarmente.
Qualcuno riesce a dirmi da cosa potrebbe dipendere?

 

[borgo italia]

ciao
l'unica cosa che vedo è

.submenu {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 0.5s ease-out;
}

prova ad aggiungere

.submenu {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}

 

[marcellino247]

Niente, quella modifica non l'ho fatta ma ora funziona lo stesso. Ho cancellato per la seconda volta la cache, si vede che nonostante l'avessi svuotata già una volta era rimasto lì qualcosa. Mah. Grazie lo stesso!