Ho una struttura di menu come questa:
Il mio requisito è, quando passo il mouse su item1, quindi subitem1, subitem2, subitem3, subitem4 devono solo essere visualizzati e subitem5 – 8 non è necessario visualizzarli.
Quando passo il mouse su item2 , devono essere visualizzati solo i subitem5 – 8. Come posso ottenere questo utilizzando css?
Ho provato:
ul.menu ul{ display: none; } ul.menu li:hover:first-child ul { display:block; }
.menu li > ul { display:none; } .menu li:hover > ul { display:block; }
VIVERE
Qualcosa come questo? (Senza cambiare il tuo html)
CSS:
ul li ul {display:none;} ul > li:hover ul{display:block;} ul li ul > li > ul.sub-ul-2 {display:none;} ul > li:hover ul > li:hover ul{display:block;}
DEMO 1
Aggiornamento: (Senza utilizzare alcuna class e cursos: puntatore;)
ul li ul {display:none;} ul > li:hover ul{display:block;} ul > li > ul > li > ul > li{display:none;} ul > li:hover ul > li:hover ul li{display:block;} li{cursor:pointer;} /* For the hand (cursor) while hover over the li */
DEMO 2
Oppure il breve css, dopo aver corretto il primo ul dal
a
(aggiungendo il = a esso)
.menu ul {display:none;} .menu li:hover > ul{display:block;} li{cursor:pointer;}
DEMO 3
fiddle: http://jsfiddle.net/Z22kH/
html:
css:
ul.menu li{ display: none; } ul.menu > li{ display: block; } ul.menu > li:hover > ul > li, ul.menu ul > li:hover > ul > li{ display:block; }
Ho messo insieme una demo jsfiddle funzionante e minimalista.
Nascondi tutti gli UL all’interno di .menu . Al passaggio di un elemento della lista, si rivela qualsiasi discendente diretto UL. Io uso display: block; e display: none; allo scopo di mantenerlo semplice.
CSS:
/* Hide all UL's inside .menu */ .menu ul { display: none; } /* Show any UL which is a direct child of a hovered list-item */ .menu li:hover > ul { display: block; }