Menu a fisarmonica che non funziona solo in chrome

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.

/* 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?