Hallo alle miteinander,
mein Problem ist folgendes: Ich habe ein Menü inkl. Untermenü erstellt, welches beim Überfahren mit der Maus aufklappt. Soweit sogut. Ich möchte nun, dass die Ausklappbaren Menüs transparent erscheinen. Da ich für Mozilla-basierende Browser und dem IE verschiedene CSS-angaben benötige, habe ich dafür 2 unterschiedliche Methoden für IE und den Rest benutzt.
Mein Problem dabei: FFF 3 stellt die Transparenz korrekt dar. Sobald ich aber den Alpha-Filter für den IE setze klappt mein 2. Untermenü nicht mehr auf. Kann mir hier jemand raten?
Hier der Code:
HTML-Seite:
...
<link rel="stylesheet" media="all" type="text/css" href="styles/dropdown.css" />
<!--[if lte IE 6]>
<link rel="stylesheet" media="all" type="text/css" href="styles/dropdown_ie.css" />
<![endif]-->
...
<li><a class="hide" href="#">HAUPTMENÜ</a>
<!--[if lte IE 6]>
<a href="#">HAUPTMENÜ
<table><tr><td>
<![endif]-->
<ul class="transp">
<li><a href="#" title="Titel">Untermenü 1-1</a></li>
<li><a href="#" title="Titel">Untermenü 1-2</a></li>
<li><a href="#" title="Titel">Untermenü 1-3</a></li>
<li><a class="hide" href="#" title="Titel">Untermenü 1-4 ></a>
<!--[if lte IE 6]>
<a class="sub" href="#" title="Titel">Untermenü 1-4 >
<table><tr><td>
<![endif]-->
<ul>
<li><a href="#" title="Titel">Untermenü 2-1</a></li>
<li><a href="#" title="Titel">Untermenü 2-2</a></li>
<li><a href="#" title="Titel">Untermenü 2-3</a></li>
<li><a href="#" title="Titel">Untermenü 2-4</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
<li><a href="#" title="Titel">Untermenü 1-5</a></li>
</ul>
<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->
</li>
...
--------------------------------------------------------------
Hier der CSS Code allgemein:
/* Navigationsleiste Hauptmenü */
.nav {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
font-size: 8pt;
border-top: 1px solid #999;
border-right: 1px solid #999;
background: #C04000;
position: absolute;
top: 10px;
left: 210px;
z-index:100;
}
.nav a {
font-weight:bold;
font-size: 8pt;
}
.sub {
zoom:1;
}
.transp {
opacity: .8;
}
.nav ul li a, .nav ul li a:visited {
display:block;
text-decoration:none;
width:144px;
height:22px;
text-align:center;
color: #333;
padding-top: 8px;
}
.nav ul {
padding:0;
margin:0;
list-style: none;
}
.nav ul li {
float:left;
position:relative;
}
/* Submenü ausgeblendet */
.nav ul li ul {
display: none;
}
/* specific to non IE browsers */
/* Hauptmenü Mousover */
.nav ul li:hover a {
color:#fff;
background:#cc6b3f;
}
/* Submenü 1 ausgeklappt */
.nav ul li:hover ul {
display:block;
position:absolute;
top:30px;
left:0;
width:120px;
}
/* Submenü 1 Eintrag mit Submenü */
.nav ul li:hover ul li a.hide {
background:#cc6b3f;
color:#000;
}
.nav ul li:hover ul li:hover a.hide {
background:#C04000;
color:#000;
}
/* Submenü 2 */
.nav ul li:hover ul li ul {
display: none;
}
.nav ul li:hover ul li a {
display:block;
background:#cc6b3f;
color:#000;
}
.nav ul li:hover ul li a:hover {
background:#C04000;
color:#000;
}
/* Position Submenü */
.nav ul li:hover ul li:hover ul {
display:block;
position:absolute;
left:144px;
top:0;
}
.nav ul li:hover ul li:hover ul.left {
left:-105px;
}
--------------------------------------------------------
und hier der CSS-Code speziell für den IE:
.nav ul li a:hover ul li a ul {
visibility:hidden;
}
.nav ul li a:hover ul li a {
background:#cc6b3f;
color:#000;
}
.nav ul li a:hover ul li a:hover {
background:#C04000;
color:#000;
}
/* Position Submenü */
.nav ul li a:hover ul li a:hover ul {
visibility:visible;
position:absolute;
left:144px;
top:0;
color:#000;
filter: alpha(opacity=80);
}
.nav ul li a:hover ul li a:hover ul.left {
left:-105px;
}
-----------------------------------------------------
Gruß
Jörg