Menu a discesa CSS: nav ul ul li Spostato a destra

Ecco un’immagine:

Menu a discesa Il problema è il nav ul ul li spostato a destra, come si vede nell’immagine, la scheda “Contatto” spostata a destra, e quindi la dimensione non era quello che volevo. Voglio che la scheda “Contatti” abbia la stessa dimensione di “Informazioni”.

Questo è il mio codice:

(HTML)

  

(CSS)

 /* Basic Styling */ a { text-decoration:none; color:inherit; } /* Menu Styling */ nav > ul > li { display:inline-block; width:200px; height:50px; line-height:50px; margin:0px; padding:0px; background-color:#dddddd; text-align:center; } nav ul li:hover { background-color:#aaaaff; } nav ul ul { display:none; } nav ul li:hover > ul { display:block; position:relative; } nav ul li:hover > ul > li { display:block; width:400px; height:80px; line-height:80px; padding:0px; margin:0px; text-align:center; position:relative; } nav ul li { float: left; } nav ul ul li, nav ul ul li a { display:block; } 

Violino

Il problema era che la larghezza e le altezze per gli elementi dell’elenco all’interno dell’ulivo erano diverse da quelle dell’ulteriore ul. Per correggere il rientro ho impostato il padding a 0 per il tuo ul interiore.

Il codice qui sotto dovrebbe funzionare. Anche qui c’è un link alla mia codepen http://cdpn.io/ivJxc

 /* Basic Styling */ a { text-decoration:none; color:inherit; } /* Menu Styling */ nav > ul > li { display:inline-block; width:200px; height:50px; line-height:50px; margin:0px; padding:0px; background-color:red; text-align:center; } nav ul li:hover { background-color:#aaaaff; } nav ul ul { display:none; padding-left:0; } nav ul li:hover > ul { display:block; position:relative; } nav ul li:hover > ul > li { display:block; width:200px; height:50px; line-height:50px; padding:0px; text-align:center; } nav ul li { float: left; } 

Ciao, devi aggiungere una regola aggiuntiva, è qualcosa di simile in basso

 ul li ul { padding: 0; position: absolute; left: 0; width: 200px; } 

aggiungi semplicemente questa regola, quindi funzionerà. Ritengo sia meglio dare una regola a ul ul ul, poiché è il contenitore del suo li. Più tardi, puoi avere più controllo su di esso.

controlla jsFiddle http://jsfiddle.net/wenbolovesnz/J7T9M/

 nav ul ul li{ width: 200px; background-color:#dddddd; } nav ul ul { padding: 0; display:none; }