Menu verticale CSS UL LI

      #Menu { padding:0; margin:0; list-style-type:none; font-size:13px; color:#717171; width:100%; } #Menu li { border-bottom:1px solid #eeeeee; padding:7px 10px 7px 10px; } #Menu li:hover { color:White; background-color:#ffcc00; } #Menu a:link { color:#717171; text-decoration:none; } #Menu a:hover { color:White; }    

Quando passo il mouse su di esso, il colore di sfondo viene cambiato immediatamente, ma il colore dei caratteri rimane lo stesso finché non passa il mouse sopra il testo.

In breve voglio che il mio menu si comporti in modo simile al menu stackoverflow (Domande Tag Users ….)

Qualsiasi aiuto sarà apprezzato.

Lo farei in questo modo:

  1. Imposta i tag da display:block

  2. Rimuovi il padding dai tuoi

  3. ( padding:0px )

  4. Aggiungi nuovamente il padding al padding:7px 10px 7px 10px; tags padding:7px 10px 7px 10px;

  5. Aggiungi background-color:#ffcc00; a #Menu a:hover

  6. Sbarazzati di #Menu li:hover

è necessario aggiungere #Menu li:hover a {color:White;} Questo imposterà il colore bianco per a quando viene posizionato un li .

Demo: http://jsfiddle.net/Nceef/

Dare queste proprietà CSS:

 #Menu a {display:block} #Menu a:hover,active {color:#text-color;background:#background-color;} 
 #Menu li { border-bottom:1px solid #eeeeee; } #Menu li a:hover { color:White; background-color:#ffcc00; } #Menu a:link { color:#717171; text-decoration:none; display:block; padding: 7px 10px; } 

L’unico inconveniente di questo metodo sono i tuoi elementi nella lista che le ancore arent non verranno riempite correttamente.

dimostrazione

http://jsfiddle.net/loktar/F6UGv/