jaderbass: Transparenz und Ausklappmenü bei IE6 fehlerhaft

Beitrag lesen

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 &gt;</a>  
  
    <!--[if lte IE 6]>  
    <a class="sub" href="#" title="Titel">Untermenü 1-4 &gt;  
    <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