[HTML] Menu a fisarmonica che non funziona in chrome

marcellino247

Nuovo Utente
4 Mag 2015
10
0
1
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:


HTML:
<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:
Codice:
/* 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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.046
150
63
PR
www.borgo-italia.it
ciao
l'unica cosa che vedo è
Codice:
.submenu {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 0.5s ease-out;
}
prova ad aggiungere
Codice:
.submenu {
  overflow: hidden;
  max-height: 0;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
 

marcellino247

Nuovo Utente
4 Mag 2015
10
0
1
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!
 
Discussioni simili
Autore Titolo Forum Risposte Data
F [WordPress] [HTML] Aggiungere una pagina solo allo sticky menu WordPress 4
W [HTML] Animazione menu mobile HTML e CSS 0
P [HTML] Eliminare doppio menu in wordpress WordPress 2
M [HTML] problema spazio aggiuntivo tra elementi <li> di menu a tendina HTML e CSS 1
L [css e html] destra e sinistra (menu navigazione) HTML e CSS 3
P [Gratuito][Cerco] qualcuno per fare menu a tendina ottimizzato per mobile-responsive con css e html Offerte e Richieste di Lavoro e/o Collaborazione 3
P [HTML] Problema con menu orizzontale a tendina per sito web HTML e CSS 17
Selenio89 [HTML] creare menu di navigazione HTML e CSS 2
C [Javascript] [HTML] Problemi: Overlay, Banner, Menu Javascript 4
C 3 Bug CSS AND HTML: Overlay-Banner-Menu HTML e CSS 0
C 3 BUG CSS AND HTML: OVERLAY - BANNER- MENU HTML e CSS 0
A [HTML] Menu con effetto slide down HTML e CSS 0
Kolop [HTML] Menu a colonne stessa lunghezza HTML e CSS 7
S [HTML] Problema menu a comparsa HTML e CSS 5
G [HTML] mettere menu style smartphone anche sui tablet HTML e CSS 0
L [HTML] versione mobile eliminare stile menu da nav HTML e CSS 0
L [HTML] Menu di 4 livello "dropdown menu" HTML e CSS 6
TONY1960 [HTML] MENU VERTICALE SEMPRE VISIBILE Offerte e Richieste di Lavoro e/o Collaborazione 6
T [HTML] menu a discesa HTML e CSS 8
elpirata [HTML] Non riesco a centrare menu orizzontale HTML e CSS 5
L [HTML] bootstrap problema menu dropdown in mobile. HTML e CSS 3
felino [HTML] DIV menu fisso durante lo scroll HTML e CSS 5
M Il menu HTML funziona correttamente se richiamato da un file php non funziona più PHP 3
I Menu senza refresh - sostituzione vecchi frame HTML jQuery 2
H [HTML] Menu orizzontale su tre o più livelli HTML e CSS 4
F HTML non lavora dal menu Visualizza x Kodemondo HTML e CSS 3
V Menu HTML come sarebbe in XHTML? HTML e CSS 10
G Pagina html in stringa PHP 2
E Sostituzione Elemento Html PHP 3
G Elementi HTML HTML e CSS 1
K Visualizzare del html responsive in una Webview Sviluppo app per Android 0
T Domanda valutazione html LinkedIn 2022 pt3 HTML e CSS 7
T Domanda valutazione html LinkedIn 2023 pt2 HTML e CSS 15
T Domanda valutazione html LinkedIn 2023 pt1 HTML e CSS 1
MarcoGrazia Salvataggio HTML in database PHP 2
K posizionare variabile da pagina html all'iframe. Javascript 1
peppe0703 Come Estrarre dati da db wordpress e richiamarli in html esterno HTML e CSS 0
L problema collegamento file css con html HTML e CSS 1
D Informazioni da XAMPP su HTML PHP 0
R Immagini html HTML e CSS 2
K File audio in html, chi mi può aiutare? HTML e CSS 0
K Aiuto con file audio in html HTML e CSS 1
Antonio67 Lanciare file shell bash da html HTML e CSS 2
M Riportare in tabella HTML dati estratti con query SQL MySQL 0
G Codice html Javascript 1
M Collegamento tra form html e script php PHP 4
L Ricezione dei dati su file php da modulo html PHP 6
F Creare elementi html con javascript Javascript 3
G Appicazione HTML per inserimento dai in Database Access Microsoft HTML e CSS 0
W visualizzare solo file html e sottocartelle di una cartella PHP 1

Discussioni simili