CSS: ein Hover-Problem

[Bastian]

Hallo zusammen

Mal gucken, ob da ein CSS-Profi ist und mir helfen kann.

Ich habe für eine Navigation eine <ul>, die mit Hilfe von display: inline horizontal dargestellt wird.

Die <li>-Tags haben einen Hover-Effekt, sodass bei Mouseover ein Hintergrundbild angezeigt wird.

Innerhalb des <li> sind die Textlinks.

Was ich nun möchte, ist, dass das gesamte <li> klicksensitiv wird bei Mouseover. Jetzt ist es so, dass <li> bei Mouseover zwar das Hintergrundbild zeigt, der Link jedoch erst klickbar ist, wenn die Maus auf den Linktext zeigt.

Eigentlich dachte ich, das würde gehen, wenn ich <a> mit display: block ergänze. Das half aber nicht.

Hier die Codes:

#navigation a {	
  display: block; }

#navigation ul {	
  padding: 0; 
  margin: 0; 
  list-style: none; }

#navigation li { 	
  float: left; 
  position: relative; 
  width: auto; 
  height: 35px; 
  padding: 5px 20px 5px 20px; 
  margin: 0; 
  display: inline; }

#navigation li:hover,
#navigation li.aktiv {	
  background-image: url(../grafiken/layout/navigation_aktiv.png);
  background-position: 0px 13px; background-repeat: no-repeat; }

<ul id="navigation_liste">
  <li class='aktiv'><a href="aktuell" alt="Aktuell">Aktuell</a></li>
  <li><a href="portraet" alt="Portr&auml;t">Portr&auml;t</a></li>
</ul>

 

[dms]

Durch display:block füllt das a das li dennoch nicht ganz aus, da das li ja entsprechendes padding hat. Nimm das padding des li weg und füge es dem a hinzu, dannn sollte es klappen.

#navigation a {
display: block;
padding: 5px 20px 5px 20px; }

#navigation li {
float: left;
position: relative;
width: auto;
height: 35px;
margin: 0;
display: inline; }

 

[Bastian]

Ah, super. Das war's!

Ich dachte, padding wäre davon nicht betroffen. Sehr schön, wieder was gelernt.