breite und schmale Navigations-lis

[pto]

Hallo, kriege es nicht hin, dass in der Navigationsliste nicht nur breitere und schmalere Menüpunkte stehen (das klappt), sondern diese auch korrekt bei :hover funktionieren. Vielleicht kann mal jemand einen Blick werfen. Hier die
testseiteHier der Code für den Bereich:

* {  
 margin:0;  
 padding:0;  
  
 text-decoration:none;  
}  
  
  
  
ul#navi  {  
    position: relative;  
   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;}  
  
.small{  
    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: 70px;  
}  
  
.small:hover{  
    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: 70px;  
   background:#a33;  
   color:#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;  
  width: 103px;  
  color:#fff;  
}  
  
ul#navi a span {  
 float:right;  
  font-weight:normal;  
  }

Und hier das html

	        <ul id="navi">  
		  
    <li><a class="aktiv small" 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 class = "small"><a class="titel"  href="#">S/L/XL </a>  
        <ul id="knoten_4" class="small">  
            <li class="small"><a href="#">S </a></li>  
            <li class="aktiv small"><a href="#">L </a></li>  
            <li class="small"><a href="#">XL </a></li>  
        </ul>  
    </li>

Gruß und Dank
pto