✔ [IE] Div Overflow hinter anderem Div (UL-Dropdown)

[Danielku15]

Hi Leute.
Ich habe gerade ein riesen Problem mit einem DropDown Menü. Und zwar habe ich über eine UL-Liste ein Dropdown Menü erstellt. Beim Hover werden die Child-Elemente eingeblendet. Dieses Menü befindet sich im "Navigation"-Div. Direkt darunter liegt der "Header"-Div. Nun sollte der Overflow des Navigation-Divs über dem Header-Div liegen sodass die Menüpunkte sichbar werden. Soweit sogut. Im FF wird das Menü wunderbar über der Navigation dargestellt (Bild1). Im IE7 sowie im IE6 werden die Menüpunkte hinter den Header-Div gelegt (Bild 2 und 3). Der Z-Index der Navigation liegt bei 10 und der des Headers bei 5. Ich hab nun schon ewig rumexperimentiert, jedoch bin ich nicht weiter gekommen. Hier noch mein Code:

CSS:

#navigation
{
	background:url(../images/layout/navigation.jpg) no-repeat;
	width:928px;
	margin:auto;
	height:38px;
	padding-left:30px;
	padding-right:30px;
	overflow:visible;
	z-index:10 !important;
}
#header
{
	background:url(../images/layout/header.jpg) no-repeat;
	width:928px;
	margin:auto;
	padding:0;
	height:154px;
	clear:both;
	padding-left:30px;
	padding-right:30px;
	z-index:5 !important;
}

HTML:

<div id="navigation" class="sort-pages modify-pages">
    <ul>
        <li class="selected parent-nav-item"><a href="/web/guest/wissenschaftlich" ><span>Entdecken</span></a>
            <ul class="child-menu">
                <li><a href="/web/guest/wissenschaftlich" ><span>Entdecken</span></a></li>
                <li><a href="/web/guest/211" >Wissenschaftlich</a></li>
            </ul>
        </li>
        <li class="parent-nav-item"><a href="/web/guest/erleben" ><span>Erleben</span></a>
            <ul class="child-menu">
                <li><a href="/web/guest/erleben" ><span>Erleben</span></a></li>
                <li><a href="/web/guest/wanderwege" >Wanderwege</a></li>
                <li><a href="/web/guest/197" >Faszination Moor</a></li>
                <li><a href="/web/guest/198" >Karte</a></li>
                <li><a href="/web/guest/195" >Infostellen</a></li>
            </ul>
        </li>
    ...
</div>


<div id="header">
    <!-- Dock -->
    <div class="lfr-dock interactive-mode">
        <h2 class="user-greeting"><span>Willkommen Admin Istrator</span></h2>
        <ul class="lfr-dock-list">
            <li class="home"><a href="http://kuschny.coderline.net:8080">Home</a></li>
        <ul>
    </div>        
    <!-- Dock end -->
</div>

Die beiden Klassen sort-pages und modify-pages beinhalten keine Styleinformationen, diese sind nur für Javascripts relevant. (Beim Entfernen besteht das Problem).

Ich bitte euch um eine rasche Antwort da die Webseite bald fertig gestellt werden soll.

Mit freundlichen Grüßen
Danielku15

 

[Maik]

Hi,

Im IE7 sowie im IE6 werden die Menüpunkte hinter den Header-Div gelegt (Bild 2 und 3). Der Z-Index der Navigation liegt bei 10 und der des Headers bei 5.

die z-index-Eigenschaft funktioniert nur in Verbindung mit der position-Eigenschaft (absolut oder relativ), da nützt die angehängte !important-Regel herzlich wenig.

mfg Maik

 

[Danielku15]

Mensch bin ich wieder mal ungenau am arbeiten. Aufgrund nerviger Browserweichen für den IE hab ich wieder mal die Hälfte nicht für den IE übernommen. Funktioniert wieder. Vielen dank. Sollte mal wieder ne P ause machen