Menü LI UL, hover füllt Farbe nicht aus

[Karsten]

Ich habe ein css erstellt, doch beim Hover soll eigentlich das ganze Feld die Farbe wechseln nicht nur der Text! Kann mir jemand helfen?

Karsten

<style type="text/css">  
#menu ul  
{  
list-style-type:none;margin:0;padding:0;  
}  
  
#menu li  
{  
padding:5px 0 5px 0;  
border-bottom: 1px dotted #000;  
}  
  
#menu li a  
{  
text-decoration: none;  
}  
  
#menu li a:hover  
{  
color:#fff;  
background:#000;  
}  
</style>

[Gunnar Bittersmann]

@@Karsten:

nuqneH

Ich habe ein css erstellt, doch beim Hover soll eigentlich das ganze Feld die Farbe wechseln nicht nur der Text!

#menu li a
{

display: block;

text-decoration: none;
}

Dann füllt die 'a'-Box die 'li'-Box aus.

Qapla'

[Tobi]

#menu li a:hover
{
color:#fff;
background:#000;
}

Versuch es mal stattdessen mit

#menu li:hover
{
color:#fff;
background:#000
}

[Gunnar Bittersmann]

@@Tobi:

nuqneH

#menu li:hover
{
color:#fff;
background:#000
}

Nein, so nicht.

Das hätte zur Folge, dass bei der gesamten 'li'-Box der Hover-Effekt auftritt, aber nur ein Teil davon (die 'a'-Box als Link dient). Ein Hover-Effekt an einer Stelle, an der beim Klick nichts passiert, verwirrt den Nutzer.

Auch hier müsste man 'a {display: block }' angeben.

Qapla'