Problem Mit CSS & IE Transparenz

[du ciel]

Hallo,

ich hab ein Problem mit CSS und dem IE wo ich echt nicht mehr weiter weiß.

Problem lautet: nach Anwendung von

filter: alpha(opacity=60);

in der CSS-Datei kann der IE7 zwar Transparenz darstellen, aber das per CSS definierte Drop-Down-Menü funktioniert nicht mehr bzw. wird nur bis zum Ende des DIV-Containers dargestellt.

Schalte ich die Transparenz für den IE wieder aus, dann stellt er das Pop-Menü korrekt dar und poppt es nach unten auf, so dass es über dem darunter liegenden DIV-Container mit den Inhalten liegt.

Die anderen Browser (FX, Opera) machen keinerlei Probleme, hier der Code:

<div id="ROOT">
    <div id="HEADER">
        <div id="MENUBAR">
            <ul id="MENU">

            <li><dl class="ONE">
                <dt><a href="#">News</a></dt>
            </dl></li>

            <li><dl class="ONE">
                <dt><a href="#">Programme</a></dt>
                <dd><a href="#" >SoMoPlan</a></dd>
                <dd class="LAST"><a href="#">Test</a></dd>
            </dl></li>

            <li><dl class="ONE">
                <dt><a href="#">Astronomie</a></dt>
                <dd class="LAST"><a href="#">Ephemeriden</a></dd>
            </dl></li>

            <li><dl class="ONE">
                <dt><a href="#">Musik</a></dt>
            </dl></li>

            </ul>

            <br class="CLEAR">
        </div>
    </div>
    <div id="CONTENTS">
        BLABLA
    </div>
</div>

... und die CSS-Datei:

#HEADER {
    background-image: url(images/layout_banner.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    color: #555;
    margin: 0 14px 0 14px;
    height: 300px;
    position: relative;
}

#HEADER a {color:#555;}

#MENUBAR {bottom:0; position:absolute;}

/* Definition des gesamten Menüobjektes */
#MENU {list-style-type:none; margin:0; padding:0;}

/* Lage der Hauptlinks */
#MENU li {
    float: left;
    padding: 0;
    margin: 0 1px 0 0; /* Platz zwischen Links */
    position: relative;
    width: 100px;
    height: 50px;
    z-index: 100; /* bringt Menü auf oberste Ebene */
    opacity: 0.60; /* Transparenz für restliche Browser (ab CSS3) */
    -moz-opacity: 0.60; /* Transparenz für Mozilla-Browser */
    filter: alpha(opacity=60); /* Transparenz für IE */
}

/* Grundlayout der Menüelemente */
#MENU li a, #MENU li a:visited {text-decoration:none;} /* deaktiviert Standardformat der Links */
#MENU li dl {position:absolute; top:0; left:0; padding-bottom:5px;} /* unterer Randbalken der Hauptlinks */
#MENU li dd {display:none;} /* Untermenüs unsichtbar machen */

/* Aktivitäten bei Hover */
#MENU li a:hover {border:0;} /* Umrandung der Links bei Hover entfernen */
#MENU li:hover dd, #MENU li a:hover dd {display:block;} /* Aufpoppen der Unterlinks bei Hover */
#MENU li:hover dl, #MENU li a:hover dl {padding-bottom:5px;} /* Blockabschluss der Unterlinks */

/* Blockformat der Hauptlinks */
#MENU dl {width:100px; margin:0; padding:0; background:#c9ba65;}
#MENU dt {margin:0; padding:5px 5px 5px 20px; font-size:1.1em; color:#fff; border-bottom:1px solid #fff; border-top:1px solid #fff;}

/* oberer Randbalken der Hauptlinks */
#MENU .ONE {background:#827b6b; border-top:5px solid #dca;}

/* Background der Hauptlinks */
#MENU .ONE dt {background:#000;}

/* Layout der Unterlinks */
#MENU dd {margin:0; padding:0; color:#fff; font-size:1em; text-align:left;} /* Format der Unterlinks */
#MENU .ONE dd {border-bottom:1px solid #aaa;}
#MENU dd.LAST {border-bottom:1px solid #fff;} /* Abschlusslinie des letzten Unterlinks */

/* Blockbildung und Schriftfarbe der Hauptlinks */
#MENU dt a, #MENU dt a:visited {display:block; color:#fff;}

/* Schriftfarbe der Hauptlinks bei Hover */
#MENU dt:hover, #MENU dt:hover a {background:#fff; color:#000;}

/* Blockbildung und Abstände der Unterlinks */
#MENU dd a, #MENU dd a:visited {display:block; color:#fff; text-decoration:none; padding:4px 5px 4px 20px; width:75px;}

/* Hintergrund und Schriftfarbe der Unterlinks */
#MENU .ONE dd a {background:#000000; color:#fff;}

/* Hintergrund und Schriftfarbe der Unterlinks bei Hover */
#MENU .ONE dd a:hover {background:#ffffff; color:#000;}

/* löscht floated Items */
.CLEAR {clear:both; height:0; line-height:0.0; font-size:0;}

Vielleicht erkennt jemand, woran es liegt ... wahrscheinlich ist es einer der unzähligen Bugs des IE, aber vielleicht liegt der Fehler ja auch bei mir und jemand kann mir auf die Sprünge helfen. Auf jedenfall bin ich dankbar für jede Hilfe.



Grüße,
du ciel