Horizontales CSS Menü funktioniert für alle Browser - außer dem IE...

[mightyx]

Hallo,

ich habe leider ein schon seit Wochen andauerndes Problem mit einem neu gestalteten horizontalen Menü mit Untermenüpunkten, das rein auf CSS basiert.
Alle gängigen Browser (selbst getestet mit Firefox 3, 4, Safari und Opera auf Mac und Win) stellen das Menü korrekt dar, nur der IE (alle Versionen von 6-9!) stellt die Untermenüs einfach überhaupt nicht dar. Beim IE6 ist mir das Problem ja bekannt, aber bei den neueren Versionen müsste es doch gehen, oder?

Hier mein Code aus dem Stylesheer, vielleicht findet ja jemand den Fehler?

/* Begin Horizontal Menu */

ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
 list-style-type: none;
list-style-image: none;
 margin: 0px;
 padding: 0px;
}

ul.dropdown {
 position: relative;
 float: left;
 z-index: 1;
 font-weight: bold;
}


ul.dropdown li {
 float: left;
 line-height: 1.3em;
 vertical-align: middle;
     color: #000;
     padding: 0px 10px;
 zoom: 1;
}



ul.dropdown li.hover,
ul.dropdown li:hover {
 position: relative;
 z-index: 3;
     background-color: #edfba8;
     color: #000;
}

ul.dropdown ul {
 visibility: hidden;
 position: absolute;
 left: 0;
 top: 12px;
 z-index: 2;
     width: 150px;
}

ul.dropdown ul li {
 float: none;
font-weight: normal;
     padding: 5px 10px;
      background-image: url(images/horizontal-menu/bg-horizontalmenu.png);
 background-repeat: repeat;
 list-style-type: none;
list-style-image: none;
}

ul.dropdown ul ul {
 top: 1px;
 left: 150px;
 list-style-type: none;
list-style-image: none;
}

ul.dropdown li:hover > ul {
 visibility: visible;
}

ul.dropdown a:link,
ul.dropdown a:visited    { color: #000; text-decoration: none; }
ul.dropdown a:hover        { color: #000; }
ul.dropdown a:active    { color: #ffa500; }

ul.dropdown *.dir {
 padding-right: 20px;
 background-image: url(images/horizontal-menu/nav-arrow-down.png);
 background-position: 100% 50%;
 background-repeat: no-repeat;
 list-style-type: none;
list-style-image: none;
}

ul.dropdown-horizontal ul *.dir {
 padding-right: 15px;
 background-image: url(images/horizontal-menu/nav-arrow-right.png);
 background-position: 100% 50%;
 background-repeat: no-repeat;
 list-style-type: none;
list-style-image: none;
 background-color: #d8e499;
  filter:alpha(opacity=90);   /* Internet Explorer       */
  -moz-opacity:0.9;           /* Mozilla 1.6 and below   */
  opacity: 0.9;               /* newer Mozilla and CSS-3 */
}
/* END Horizontal Menu */

 

[bobomampf]

Ich bin mir jetzt nicht sicher, aber unterstützt der IE CSS3????

 

[mightyx]

Kannst du mir denn sagen, was an diesem Code CSS3 ist und wie es in CSS2 aussehen müsste?

 

[threadi]

Würde drauf tippen es liegt an

ul.dropdown *.dir {

Allerdings wäre ein Link zur betreffenden Seite interessant für eine genaue Beurteilung.

 

[mightyx]

Hier der Link:

www.kaiserstuhlshop.de

 

[bobomampf]

Naa Zoom ist z.B. Css3

 

[threadi]

Hab leider keinen IE hier, aber auf den ersten Blick sehe ich bis auf oben genanntes kein Problem.

@bobomampf: zoom wird vom IE schon seit langem unterstützt und kann für diesen Browser bis einschließlich Version 8 verwendet werden um einem Element ein hasLayout zu geben. Fehler verursacht es eher nicht, vor allem nicht in so einem Zusammenhang.

 

[mightyx]

Ja, zoom deaktivieren habe ich schon probiert, das ist nicht das Problem.
Was wäre die Alternative zu "ul.dropdown *.dir {" , damit es im IE funktioniert?

 

[threadi]

Dafür gibt es keine Alternative in CSS. Lass einfach das * weg.

 

[mightyx]

Jetzt habe ich das * weggelassen, also steht da "ul.dropdown-horizontal ul .dir {" und "ul.dropdown .dir {" aber leider will der IE immer noch nicht...