Mysteriöser "Überhang" in der Navigation

[Richard]

Hallo,

ich habe mir das SELFHTML-Beispiel zu mehrdimensionalen CSS-basierten Navigationsleisten angesehen und etwas abgewandelt ausprobiert. Ich habe die Abstände zwischen den <ul>s und <li>s auf 0 gesetzt und die Farben und Größen etwas verändert.

Wenn ich jetzt über den ersten Listenpunkt hovere, wird die Liste darunter korrekt eingeblendet und hat genau die gewünschte Breite. Ab dem zweiten Listenpunkt wird die dynamisch eingeblendete Liste jedoch um etwa einen Pixel zu breit und sie ragt zu weit nach rechts. Ab dem dritten Punkt sieht es komischerweise wieder normal aus.

Anbei das CSS:

div#navi {  
    width: 90%;  
    padding: 0.8em;  
  }  
  * html div#navi {  /* Korrektur fuer IE 5.x */  
    width: 48.7em;  
    width: 47.1em;  
  }  
  div#navi div {  
     clear: left;  
  }  
  ul#menu {  
    margin: 0; padding: 0;  
    text-align: center;  
  }  
  
  ul#menu li {  
    list-style: none;  
    float: left;  /* ohne width - nach CSS 2.1 erlaubt */  
    position: relative;  
 margin-top: -0.1em;  
    margin-left:-0.1em;  
    padding: 0;  
  }  
  
ul#menu li.first {  
 margin-top:0.1em;  
}  
  
  * html ul#menu li {  /* Korrektur fuer den IE */  
    margin-bottom: -0.1em;  
  }  
  
  ul#menu li ul {  
    margin-left: 0.1em; padding: 0;  
    position: absolute;  
    top: 1.6em;  
    display: none;  /* Unternavigation ausblenden */  
  }  
  * html ul#menu li ul {  /* Korrektur fuer IE 5.x */  
    left: -1.5em;  
    lef\t: -0.4em;  
  }  
  ul#menu li:hover ul {  
    display: block;  /* Unternavigation in modernen Browsern einblenden */  
  }  
  ul#menu li ul li {  
    float: none;  
    display: block;  
  }  
  
  ul#menu a, ul#menu span {  
    display: block;  
    width:9.4em;  /* Breite den in li enthaltenen Elementen zuweisen */  
 padding: 0.2em;  
    text-decoration: none;  
    border: 1px solid black;  
    color: white; background-color: #1C86EE;  
  }  
  * html ul#menu a, * html ul#menu span {  
    width: 8.6em;   /* Breite nach altem MS-Boxmodell für IE 5.x */  
    w\idth: 6.4em;  /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */  
  }  
  ul#menu a:hover, ul#menu span, li a#current {  
    border-color: black;  
    border-left-color: black; border-top-color: black;  
    color: blue; background-color: lightblue;  
  }  
  li a#current {  /* aktuelle Rubrik kennzeichnen */  
    color: white; background-color: lightblue;  
  }  
  ul#menu li ul span {  /* aktuelle Unterseite kennzeichnen */  
    background-color: lightblue;  
  }  

Die HTML-Datei hat folgende Struktur;

<div id="navi">  
<ul id="menu">  
  <li><a class="first" href="">Erster Punkt</a>  
    <ul>  
      <li><a href="">Erster Unterpunkt</a></li>  
    </ul>  
  </li>  
</ul>  
</div>

Beste Grüße
Richard