Come creare una lista non ordinata all’interno di una lista non ordinata in un menu elenco?

Nella mia pagina, sto cercando di creare una lista non ordinata all’interno di una lista non ordinata nel mio menu in modo che ci sia un secondo menu a tendina. Il problema è che il secondo menu a discesa viene visualizzato contemporaneamente al primo.

.menu { border: none; border: 0px; margin: 0px; padding: 0px; font: 67.5%"Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; font-size: 14px; font-weight: bold; } .menu ul { background: #333333; height: 35px; list-style: none; margin: 0; padding: 0; } .menu li { float: left; padding: 0px; } .menu li a { background: #333333 url("http://sofit.miximages.com/html/seperator.gif") bottom right no-repeat; color: #cccccc; display: block; font-weight: normal; line-height: 35px; margin: 0px; padding: 0px 25px; text-align: center; text-decoration: none; } .menu li a:hover, .menu ul li:hover a { background: #2580a2 url("http://sofit.miximages.com/html/hover.gif") bottom center no-repeat; color: #FFFFFF; text-decoration: none; } .menu li ul { background: #333333; display: none; height: auto; padding: 0px; margin: 0px; border: 0px; position: absolute; width: 225px; z-index: 200; /*top:1em; /*left:0;*/ } .menu li:hover ul { display: block; } .menu li li { background: url('http://sofit.miximages.com/html/sub_sep.gif') bottom left no-repeat; display: block; float: none; margin: 0px; padding: 0px; width: 225px; } .menu li:hover li a { background: none; } .menu li ul a { display: block; height: 35px; font-size: 12px; font-style: normal; margin: 0px; padding: 0px 10px 0px 15px; text-align: left; } .menu li ul a:hover, .menu li ul li:hover a { background: #2580a2 url('http://sofit.miximages.com/html/hover_sub.gif') center left no-repeat; border: 0px; color: #ffffff; text-decoration: none; } .menu p { clear: left; } 
  

La chiave per ottenere il funzionamento del sottomenu è utilizzare il combinatore figlio ( > ) per indirizzare i discendenti diretti.

Un combinatore di bambini descrive una relazione d’infanzia tra due elementi. Un combinatore figlio è costituito dal carattere “maggiore di segno” (U + 003E,>) e separa due sequenze di selettori semplici.

( http://www.w3.org/TR/css3-selectors/#child-combinators )

Sono richieste le seguenti modifiche:

  • Aggiungi l’impostazione .menu li ul ul left: 100%; e in top: 0; . Questo dirà a tutti i sottomenu di essere posizionati contro il bordo destro del suo menu genitore.
  • Cambia .menu li:hover ul a .menu li:hover > ul . Ciò assicurerà che venga mostrato solo il figlio diretto ul quando l’utente si posiziona sopra il padre li .
  • Cambia .menu li ul a:hover, .menu li ul li:hover a passa .menu li ul a:hover, .menu li ul li:hover a a .menu li ul li:hover > a passa a .menu li ul li:hover > a . Ciò assicurerà che solo i bambini diretti siano evidenziati quando l’utente si posiziona sopra il padre li .
 .menu { border: none; border: 0px; margin: 0px; padding: 0px; font: 67.5%"Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif; font-size: 14px; font-weight: bold; } .menu ul { background: #333333; height: 35px; list-style: none; margin: 0; padding: 0; } .menu li { float: left; padding: 0px; } .menu li a { background: #333333 url("http://sofit.miximages.com/html/seperator.gif") bottom right no-repeat; color: #cccccc; display: block; font-weight: normal; line-height: 35px; margin: 0px; padding: 0px 25px; text-align: center; text-decoration: none; } .menu li a:hover, .menu ul li:hover a { background: #2580a2 url("http://sofit.miximages.com/html/hover.gif") bottom center no-repeat; color: #FFFFFF; text-decoration: none; } .menu li ul { background: #333333; display: none; height: auto; padding: 0px; margin: 0px; border: 0px; position: absolute; width: 225px; z-index: 200; } .menu li ul ul { top: 0; left: 100%; } .menu li:hover > ul { display: block; } .menu li li { background: url('http://sofit.miximages.com/html/sub_sep.gif') bottom left no-repeat; display: block; float: none; margin: 0px; padding: 0px; width: 225px; } .menu li:hover li a { background: none; } .menu li ul a { display: block; height: 35px; font-size: 12px; font-style: normal; margin: 0px; padding: 0px 10px 0px 15px; text-align: left; } .menu li ul li:hover > a { background: #2580a2 url('http://sofit.miximages.com/html/hover_sub.gif') center left no-repeat; border: 0px; color: #ffffff; text-decoration: none; }