[HTML] Menu di 4 livello "dropdown menu"

luigi777

Utente Attivo
14 Feb 2008
1.086
1
38
42
Massa, Italy
Salve, ho questo codice.. vorrei sapere cosa devo fare per far che posso fare anche il 4 livello.. ora questo menu arriva fino al 3 livello.. secondo voi posso farlo?
Codice:
.header__menu {
}
.header__menu a {
    color: #FFF;
}
.header__menu,
.header__menu ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.header__menu li {
    position: relative;
}
.header__menu a {
    padding: 10px 20px;
    display: block;
    text-decoration: none;
}
.header__menu a:hover {
    background: #000;
}


/* Level 1 Drop Down Menu */
.header__menu > li {
    display: inline-block;
    vertical-align: top;
    margin-left: -4px; /* solve the 4 pixels spacing between list-items */
}
.header__menu > li:first-child {
    margin-left: 0;
}
.header__menu > li > a {}
.header__menu > li > a:hover {}

/* Level 2 */
.header__menu > li > ul {
    text-align: left;
    width: auto; /* change auto value with 200px if you want a bigger menu */
    display: none;
    background: #5DBB04;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 9999999; /* if you have YouTube iframes, is good to have a bigger z-index so the video can appear above the video */
}
.header__menu > li:hover > ul {
    display: block;
}
.header__menu ul li a {}
.header__menu ul li a:hover {}

/* Level 3 */
.header__menu > li > ul > li > ul {
    text-align: left;
    display: none;
    background: #E7B400;
    position: absolute;
    left: 100%;
    top: 0;
    z-index: 9999999;
}
.header__menu > li > ul > li:hover > ul {
    display: block;
}
.header__menu ul ul li {}
.header__menu ul ul li a {}
.header__menu ul ul li a:hover {}


mi potete aiutarmi ..? una cosa devo rimanere in questa struttura.

Codice:
/* Level 3 */
.header__menu > li > ul > li > ul {
    text-align: left;
    display: none;
    background: #E7B400;
    position: absolute;
    left: 100%;
    top: 0;
    z-index: 9999999;
}
.header__menu > li > ul > li:hover > ul {
    display: block;
}

Io qui penso che forse basta un ul > li .

Ma non sono sicuro.

Vi ringrazio molto e buona domenica.
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Dovresti darci il codice completo del menu CSS e HTML.
Il menu è orizzontale o verticale?
Per quarto livello intendi una voce del menu con quattro sotto menu?
Per capire ti basterebbe se ti facessi un esempio con un menu con quattro sottomenu di una voce?
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Ti allego un esempio in css3 puoi prendere spunto da questo. In alternativa un menu in javascript
 

Allegati

  • CSS3Menu.zip
    3,1 KB · Visite: 239
Ultima modifica:

luigi777

Utente Attivo
14 Feb 2008
1.086
1
38
42
Massa, Italy
ok ma voglio usare il mio. mi dici come fare? ho visto il tuo ma non capisco molto bene il codice. Non è che provi il mio e mi fai sapere se aggiungendo un . ul li viene il quarto


grazie mille.
 

luigi777

Utente Attivo
14 Feb 2008
1.086
1
38
42
Massa, Italy
allora, vi allego l'immagine che ho fatto .. però non sono sicuro essendo che lo sto usando in wordpress.

Secondo voi è giusto cosi?. Ora sono pagine di prova.
Ecco l'immagine:

Immagine.jpg
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.449
338
83
Così va bene controlla solo tutto il css in modo che funzioni correttamente
 
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
M [HTML] Menu a fisarmonica che non funziona in chrome HTML e CSS 2
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
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