Problem mit Menü (bzgl. "position: fixed")

[JPL]

Aloha

Bin gespannt auf das Ergebnis ;)

Ich auch ;)

Aber hab wieder ein kleines Problem... natürlich.

Ich habe ja drei Menüebenen.
Jeden Eintrag habe ich mit einem <Label> umgeben, der je nach Ebene mit einer Klasse .e1, .e2 oder .e3 versehen ist.

<ul>  
<li id=\"karriere1\"><input type=\"radio\" name=\"navi_1\" id=\"navi_1_1\" class=\"hackbox\""; if ($menu == "studium") {echo " checked=\"checked\"";} echo "><label class=\"e1\" for=\"navi_1_1\">Karriere</label>"; echo "  
  <ul class=\"karriere2\">  
    <li><label class=\"e2\"><a href=\"...\">Studium</a></label></li>  
    <li><input type=\"radio\" name=\"navi_2\" id=\"navi_2_1\" class=\"hackbox\""; if ( $menu == "promotion") {echo " checked=\"checked\"";} echo "><label class=\"e2\" for=\"navi_2_1\">Promotion</label>"; echo "  
      <ul class=\"karriere3\">  
      <li><label class=\"e3\"><a href=\"...\">Promotionsvortrag</a></label></li>  
      <li><label class=\"e3\"><a href=\"...\">Doktorprüfung</a></label></li>  
      </ul>  
    </li>  
  </ul>  
</li>  
</ul>

Damit werden die <label>-Inhalte der ersten Ebene um 10 Pixel, der zweiten Ebene um 20 Pixel und die der dritten Ebene um 30 Pixel eingerückt. Was auch gut funktioniert:

  
.e1 {  
padding: 0px 0px 0px 10px;  
}  
  
.e2 {  
padding: 0px 0px 0px 20px;  
}  
  
.e3 {  
padding: 0px 0px 0px 30px;  
}  

So sind die Listenelemente selbst formatiert:

  
nav ul li {  
    color: #000000;  
    margin: 0px 0px 0px 0px;  
    padding: 0px 0px 0px 0px;  
    font-size: 16px;  
    font-weight: normal;  
    line-height: 20px;  
    text-align: left;  
}  
  
nav ul li ul li {  
    color: #000000;  
    margin: 0px 0px 0px 0px;  
    padding: 0px 0px 0px 0px;  
    font-size: 14px;  
    font-weight: normal;  
    line-height: 18px;  
    text-align: left;  
 }  
  
nav ul li ul li ul li {  
    color: #000000;  
    margin: 0px 0px 0px 0px;  
    padding: 0px 0px 0px 0px;  
    font-size: 12px;  
    font-weight: normal;  
    line-height: 16px;  
    text-align: left;  
 }  

Die hover-Effekte sind dann so eingebunden:

 #karriere1 {  
          background: #444444;  
          }  
  
          #karriere1 > label:hover {  
               background: #ff0000;  
               }  
  
               .karriere2 {  
                    background: #999999;  
                    }  
  
                    .karriere2 li > label:hover {  
                         background: #ffff44;  
                         }  
  
               .karriere3 {  
                    background: #cccccc;  
                    }  
  
                    .karriere3 li > label:hover {  
                         background: #aaff44;  
                         }

Das Phänomen, daß ich jetzt habe: beim HOVER über die Listeneinträge der zweiten oder dritten Ebene, endet der HOVER-Effekt genau am Ende der Menüspalte, wie es ja auch sein soll:

Schnappschuss Ebene 3

Fährt man aber über die erste Ebene (also Hauptmenü), wird die rechte Grenze der Labels um genau diese 10 Pixel, mit der der Innenabstand nach rechts verschoben ist, verlängert:

Schnappschuss Ebene 1

Das verstehe ich nicht, da ich alle Elemente gleich definiert und eingebunden habe (meiner Meinung nach ;) ) und das Einrücken der <label>s der zweiten und dritten Ebene um 20 bzw. 30 Pixel funktioniert, ohne dass die Einträge beim HOVER um diese Pixel nach rechts hinaus verlängert sind, während es bei der ersten Ebene nicht funktioniert.

Du erkennst sicher auf den ersten Blick was das Problem ist?
:)

MfG,