IE Problem mit left:auto;

[flaep]

Hallo zusammen

Ich habe eine spezielle horizontale Multi-Level-Navigation programmiert, welche leider im IE (hier 6) nicht funktioniere will. Und zwar werden die "ausfahrenden" Submenus nicht unter dem entsprechenden Haupteintrag eingeblendet, sondern rechts neben der gesamten Navigation! Also irgendwie funktioniert die Anweisung left:auto; im IE6 nicht richtig!

Kann mir jemand helfen? In allen anderen Browsern funktioniert es tadellos.

Code Navigation:

Code: Alles auswählen

<div id="mainnavi">

<ul class="rex-navi1">
   <li><a href="/">Willkommen</a>
      <ul>
         <li><a href="/willkommen/kontakt-labor.html">Kontakt Labor</a></li>
         <li><a href="/willkommen/kontakt.html">Kontakt Beratungsstelle</a></li>
         ...
      </ul>
   </li>
   <li><a href="/genetische-untersuchungen.html">Genetische Untersuchungen</a>
      <ul>
         <li><a href="/genetische-untersuchungen/labormethoden.html">Labormethoden</a></li>
         <li><a href="/genetische-untersuchungen/praenataldiagnostik.html">Pränataldiagnostik</a></li>
         ...
      </ul>
   </li>
   ...
</ul>

</div>

CSS:

Code: Alles auswählen

#mainnavi {
   height:38px;
}

.rex-navi1, .rex-navi1 ul{
margin:0;
padding:0;
list-style-type:none;
position:relative;
}

.rex-navi1 a{
display:block;
*display:inline;
zoom:1;
}

.rex-navi1 li{
float:left;
*display:inline;
}

.rex-navi1 li ul {
position:absolute;
display:none;
width:210px;
top:0px;
left:auto;
z-index:100;
padding:0;
}

.rex-navi1 li ul a{
width:190px;
height:auto;
float:left;
}

.rex-navi1 li ul ul {
left:200px;
margin:0 0 0 10px;
}

.rex-navi1 li:hover ul ul, .rex-navi1 li:hover ul ul ul, .rex-navi1 li:hover ul ul ul ul{
display:none;
}

.rex-navi1 li:hover ul, .rex-navi1 li li:hover ul, .rex-navi1 li li li:hover ul, .rex-navi1 li li li li:hover ul{
display:block;
}

Ich habe den Code jeweils etwas "gekürzt" bzw die Style-elemente übersichtshalber gelöscht.

Das Beispiel ist zu finden unter: http://genetica.spiegeldesign.ch

Im Anhang findet ihr den Screenshot aus IE6.

Danke euch!

ie6bug.JPG (129.81 KiB) 271-mal betrachtet

[sejuma]

Der IE 6 kann kein Hover bei li.
Versuch's mal damit: http://www.ohne-css.gehts-gar.net/0066.php

[flaep]

ich habe deinen Tip beachtet. Allerdings hilft das hier nicht wirklich weiter. Denn der Hover hat ja eigentlich funktioniert, nur wird er leider am falschen "Ort" ausgegeben.

Das Problem an meiner Navi: die Submenus sollen immer exakt auf der Höhe der Oberkannte ausfahren und nicht auf der Höhe des jeweilig ausgewählten Submenueintrages. Somit muss ich die <ul>s absolut positionieren mittels "left:auto" und "top:0". Und irgendwie wird der IE damit nicht fertig. Für ihn ist "left:auto" nicht unterhalb des jeweiligen Haupteintrages, sondern neben der gesamten Navigation.. hmm, wie immer zum verzweifeln!

[flaep]

ich konnte das Problem nun lösen. Ich musste die gesamte Navigation neu programmieren. Woran es schlussendlich lag, weiss ich leider nicht danke trotzdem für eure Hilfe!