Crea un menu usando puro css e HTML

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; } 

HTML

  

CSS

 .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; }