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

[Cyx23]

Hallo Richard,

"Wenn ich jetzt über den ersten Listenpunkt hovere"

hattest du irgendwo geschrieben, bei welchen Browsern das passiert?

"Die HTML-Datei hat folgende Struktur;"

Hast du kein Beispiel mit deinem Code online?

Grüsse
Cyx23

[Richard]

Hallo Cyx23,

"Wenn ich jetzt über den ersten Listenpunkt hovere"

hattest du irgendwo geschrieben, bei welchen Browsern das passiert?

Firefox natürlich; wenn es da nicht funktioniert, sehe ich es mir in anderen Browsern gar nicht erst an.

"Die HTML-Datei hat folgende Struktur;"

Hast du kein Beispiel mit deinem Code online?

Nein, reicht das denn nicht aus? Wie dem auch sei, ich habe das CSS jetzt mal komplett gelöscht und baue es Schritt für Schritt nochmal auf...

Beste Grüße
Richard

[Cyx23]

Hallo Richard,

Nein, reicht das denn nicht aus?

nicht nur dass es so unkomfotabel trotz umfangreichem Code ist, unklar
bleibt ja u.U. der Rendermodus und die Fotführung der Liste. Die
Oberpunkte erhalten alle eine Klasse "first" oder doch nicht?
Jedenfalls kann ich dein Pixelproblem nicht nachvollziehen.

Grüsse

Cyx23