Frage stellen
ich habe schon seit einiger Zeit ein Problem mit einem auf CSS basierendem Drop-Down Menü. Das Menü sollte eigentlich Cross-Browser kompatibel sein, es funktioniert aber nicht im IE (getestet Version 6, 7, 8 ).
Alle bisherigen Änderungen haben nichts gebracht und ich bin so langsam echt am Verzweifeln...
Eigentlich sollte das Menü ein einfaches Dropdown-Menü mit Hover auf 3 Ebenen werden (1 Hauptebene mit 2 Unterebenen), nur der IE will nicht. Kann mir jemand einen guten Tipp geben? Hier der Code:
- Code: Alles auswählen
/* 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;
}
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 */
