Hintergrundfarbe bei hover über ganze Breite

[pto]

Hallo, ich habe jetzt die Hintergrundfarbe meiner Navigationspunkte bei hover nur rund um den li-Text aber nicht über die ganze li-Breite. Wie bekomme ich ihn in Listenpunktbreite. Hier mein css:

* {  
 margin:0;  
 padding:0;  
  
 text-decoration:none;  
}  
  
  
  
ul#navi  {  
    position: absolute;  
   float:left;/*  
  background:#990000;*/  
  width:100%;   /* geändert von 150px auf 100% */  
  min-width:80% !important;  
/*  overflow: hidden;*/  
}  
  
ul#navi a {  
 /*display: inline;  
 padding:14px 5px 15px 14px;  
 */  
  
  
 color:#000;  
 font-weight:bold;  
 text-align:left;  
}  
  
.aktiv  
{background: #fff;}  
  
ul#navi li  {  
    list-style:none;  
 position:relative;  
 float:left;  
  
 /* hinzugefügt um eine horizontale Ausrichtung zu erzielen */  
/* width:10.975em                   Hinzugefügt 150px / 16 = 9.375em*/  
 width: 9.375em;  
}  
  
/* Alle Ebenen ausblenden */  
  
ul#navi ul  ,  
ul#navi  li:hover ul ul ,  
ul#navi  li:hover  ul ul ul  {  
    list-style:none;  
 position:absolute;  
 left:-9999px;  
 background:#000;  
}  
  
ul#navi  li:hover ul {  
    list-style:none;  
         background:#d8d8d8;  
       border-left:1px solid #fff;  
          border-top:1px solid #fff;  
          border-right:1px solid #fff;  
          border-bottom:1px solid #fff;  
  
}  
  
ul#navi  li:hover ul ul {  
    list-style:none;  
  background:#929292;  
  
}  
  
ul#navi  li:hover ul ul ul {  
    list-style:none;  
  background:#696969;  
}  
  
ul#navi ul {  
    list-style:none;  
 top:auto;                    /* Neue Position definiert 16px Schriftgröße + (2 x 5px) padding = 30px / 16 = 1.875em*/  
}  
  
  
/* Einzelne Ebenen einblenden */  
ul#navi li:hover ul  {  
 left:0;  
 }  
  
  
                                 /* Neuer Deklarationsblock um die Unterpunkte präzise zu positionieren */  
ul#navi ul  li:hover  ul ,  
ul#navi ul  ul li:hover  ul  {  
 position:absolute;  
 left:100%;  
 top:0;  
 }  
  
ul#navi li:hover ul li {  
     border-top:1px solid #fff;;  
  
 }  
  
/* Hover Hinter- und Vordergrundfarbe für alle Ebenen */  
ul#navi li:hover > a , ul#navi  ul li:hover  > a, ul#navi ul  ul  li:hover  > a, ul#navi ul  ul ul  li:hover  > a  {  
  background:#a33;  
  color:#fff;  
}  
  
ul#navi a span {  
 float:right;  
  font-weight:normal;  
  
Dank und Gruß  
pto  
  }

[Texter mit x]

Wendest Du das hover auf das an, was den Hintergrund nicht wechselt?

Dein betroffenes html wäre eventuell auch hilfreich zum helfen.

[pto]

Wendest Du das hover auf das an, was den Hintergrund nicht wechselt?

Dein betroffenes html wäre eventuell auch hilfreich zum helfen.

Die Frage habe ich nicht verstanden, aber hier ist der entsprechende Part des HTML

	  
        <li>  
		        <ul id="navi">  
		  
    <li><a class="aktiv" href="#">Home </a></li>  
    <li><a class="titel" href="#kat1">RESSORTS </a>  
        <ul id="knoten1">  
            <li><a href="#">Aktuelles </a></li>  
            <li><a href="#">Wirtschaft </a></li>  
            <li><a href="#">Kultur </a></li>  
            <li><a href="#">Wissen </a></li>  
            <li><a href="#">Medien </a></li>  
            <li><a href="#">Sport </a></li>  
        </ul>  
    </li>  
    <li><a class="titel"  href="#kat3">REGIONEN </a>  
        <ul id="knoten2">  
            <li><a href="#">Nord </a></li>  
            <li><a href="#">Ost</a></li>  
            <li><a href="#">Süd</a></li>  
            <li><a href="#">West</a></li>  
        </ul>  
    </li>  
    <li><a class="titel"  href="#kat2">AUSLAND </a>  
        <ul id="knoten3">  
            <li><a href="#">EUROPA</a>  
                <ul>  
                    <li><a href="#">ÜBERBLICK </a></li>  
                    <li><a href="#">NORD </a>  
                        <ul>  
                            <li><a href="#">Dänemark </a></li>  
                            <li><a href="#">Schweden </a></li>  
                            <li><a href="#">Norwegen </a></li>  
                        </ul>  
                    </li>  
                    <li><a href="#">OST </a></li>  
                    <li><a href="#">SÜD </a></li>  
                    <li><a href="#">WEST </a></li>  
                </ul>  
            </li>  
            <li><a href="#">NORDAMERIKA </a>  
                <ul>  
                    <li><a href="#">ÜBERBLICK </a></li>  
                    <li><a href="#">USA </a></li>  
                    <li><a href="#">CANADA </a></li>  
                </ul>  
            </li>  
            <li><a href="#">ASIEN </a>  
                <ul>  
                    <li><a href="#">ÜBERBLICK </a></li>  
                    <li><a href="#">INDIEN </a></li>  
                    <li><a href="#">JAPAN </a></li>  
                    <li><a href="#">THAILAND </a></li>  
                </ul>  
            </li>  
            <li><a href="#">AFRIKA </a>  
                <ul>  
                    <li><a href="#">ÜBERBLICK </a></li>  
                    <li><a href="#">ÄGYPTEN </a></li>  
                    <li><a href="#">LIBANON </a></li>  
                </ul>  
            </li>  
        </ul>  
    </li>  
   <li><a class="titel"  href="#">S/L/XL </a>  
        <ul id="knoten_4">  
            <li><a href="#">S </a></li>  
            <li class="aktiv"><a href="#">L </a></li>  
            <li><a href="#">XL </a></li>  
        </ul>  
    </li>  
    <li class="datumzeit">  
  
 <?php  
    date_default_timezone_set('Europe/Berlin');  
    $timestamp = time();  
    $datum = date("d.m.Y",$timestamp);  
    $zeit = date("H:i",$timestamp);  
    echo $datum." - ".$zeit;  
?>  
  
</li>  
  
</ul>  
  
  
</div>	  
</div>	

[pto]

Habe jetzt manuell die Breite für den Background der hover-Elemente festgelegt, scheint zu klappen, ob das responsible ist, muss ich erst noch sehen. Im Moment habe ich sowieso noch das Problem das der rechte Listen-Teil der Navigation beim Resize nach unten rutscht.