Problem mit 3 Navigationsebene im CSS-Menü im Internet Explorer

Chellisa · #1 (**permalink**) 15.08.2008, 10:28

Hallo zusammen,

ich habe ein drop-line-CSS-Menü zu einem Menü mit drei Ebenen umgebaut und glaube, daß ich da auch auf einem vielversprechenden Weg bin. Im Firefox und IE7 wird mir das Ganze genauso, wie ich es haben will, angezeigt. Aber im IE6 verschluckt's die dritte Ebene, sofern sie unter einem aktiven Menüpunkt in der zweiten Ebene liegt.

Hier mein Code:

HTML-Liste:

Code:

<div id="nav">
	<ul class="select">
        <li class="first " onmouseover="navhide('sub_active');" onmouseout="navshow('sub_active');"><a href="" >Punkt 1
            <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul class="sub">
               <li class=""><a href="#" >Unterpunkt 11</a></li>
               <li class=""><a href="#" >Unterpunkt 12</a></li>
               <li class=""><a href="#" >Unterpunkt 13</a></li>
            </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
	</ul>
    <ul class="select">
        <li class="" onmouseover="navhide('sub_active');" onmouseout="navshow('sub_active');"><a href="#" >Punkt 2
	        <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul class="sub">
               <li class=""><a href="#" >Unterpunkt 21</a></li>
               <li class=""><a href="#" >Unterpunkt 22</a></li>
               <li class=""><a href="#" >Unterpunkt 23</a></li>
            </ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
	</ul>

	<ul class="current">
        <li class=""><a href="#">Punkt 3</a></li> 
    </ul>
    <ul class="sub_active">
        <li class="current_sub"><a href="#">Unterpunkt 31
                    <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
                    <ul class="sub_sub">
                       <li class=""><a href="#" >Sub-Punkt 311</a></li>
                       <li class=""><a href="#" >Sub-Punkt 312</a></li>
                       <li class=""><a href="#" >Sub-Punkt 313</a></li>
                    </ul>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
        <li class=""><a href="#" >Unterpunkt 32</a></li>
        <li class=""><a href="#" >Unterpunkt 33
                            <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
                    <ul class="sub_sub">
                       <li class=""><a href="#" >Sub-Punkt 331</a></li>
                       <li class=""><a href="#" >Sub-Punkt 332</a></li>
                       <li class=""><a href="#" >Sub-Punkt 333</a></li>
                    </ul>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
        <li class=""><a href="#" >Unterpunkt 34</a></li>
        <li class=""><a href="#" >Unterpunkt 35</a></li>
    </ul>
    <ul class="select">
        <li class="" onmouseover="navhide('sub_active');" onmouseout="navshow('sub_active');"><a href="#">Punkt 4
            <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul class="sub">
               <li class=""><a href="#" >Unterpunkt 41
                    <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
                    <ul class="sub_sub">
                       <li class=""><a href="#" >Sub-Punkt 411</a></li>
                       <li class=""><a href="#" >Sub-Punkt 412</a></li>
                       <li class=""><a href="#" >Sub-Punkt 413</a></li>
                    </ul>
                    <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
               <li class=""><a href="#">Unterpunkt 42</a></li>
               <li class=""><a href="#">Unterpunkt 43</a></li>
            </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
    </ul>
</div>

und hier das css:

Code:

body {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	background-color:#ccc;
}
#nav {
	position:absolute;
	top:169px;
	left:0;
	width:950px;
	height:35px;
	z-index:80;
	background:transparent;
	font-size:12px !important;
}

#nav .select, 
#nav .current {
	margin:0;
	padding:0;
	list-style:none;
}

#nav li {
	display:inline;
	margin:0;
	padding:0;
	height:auto;
}
#nav li a {
	font-weight:bold;
}

#nav a:hover {
	color:red !important;
}
#nav .select a:hover {
	color: red;
}
#nav .select a,
#nav .current a {
	display:block;
	height:35px;
	float:left;
	text-transform: uppercase;
	text-decoration:none;
	line-height:35px;
	white-space:nowrap;
	color:#fff;
	padding-right:20px;
	padding-left:10px;
	background-image:url(../../images/pixel.gif);
}
* html #nav .select a,
* html #nav .current a {
	width:1px;
	height:36px;
}

#nav .select a:hover,
#nav .select li:hover a {
	cursor:pointer;
}
#nav .select li:hover li a {
    text-transform:none;
    color:#fff ;
}
#nav .sub {
	display:none;
}
#nav .sub_sub {
	display:none;
}
/* for IE5.5 and IE6 only */
#nav table {
	position:absolute;
	left:0;
	top:0;
}

#nav .current a {
	color:red;
}
#nav .non_sub_active,
#nav .non_sub_sub_active {
	display:none;
}

#nav .sub li a:hover,
#nav .select a:hover .sub li a:hover,
#nav .select li:hover .sub li a:hover,
#nav .sub li .sub_sub li a:hover,
#nav .select a:hover .sub li .sub_sub li a:hover,
#nav .select li:hover .sub li .sub_sub li a:hover,

#nav .sub_sub li a:hover,
#nav .sub_active a:hover .sub_sub li a:hover,
#nav .sub_active li:hover .sub_sub li a:hover {
	color:#fff;
}

#nav .sub_active .current_sub a,
#nav .sub_active a:hover{
	color:red ;
}

#nav .select li a:hover .sub,
#nav .select li:hover .sub,
#nav .select .sub li a:hover .sub_sub,
#nav .select .sub li:hover .sub_sub {
	display:block;
	position:absolute;
	width:950px;
	top:35px;
	left:0;
	margin-top:0;
	padding:0;
	z-index:80;
	color:#fff;
	font-size:12px;
	background-image:url(../../pixel.gif);
}
#nav .sub_active li a:hover .sub_sub,
#nav .sub_active li:hover .sub_sub {
	display:block;
	position:absolute;
	width:950px;
	top:35px;
	left:0;
	margin-top:0;
	padding:0;
	z-index:80;
	color:#fff;
	font-size:12px;
	background-image:url(../../pixel.gif);
}
#nav .sub_sub,
#nav .sub, 
#nav .sub_active {
	margin:0;
	padding:0;
	list-style:none;
}

#nav .sub_active {
	display:block;
	position:absolute;
	width:950px;
	top:35px;
	left:0;
	margin-top:0;
	padding:0;
	z-index:10;
}
* html #nav .sub_active,
* html #nav .select a:hover .sub,
* html #nav .select .sub a:hover .sub_sub,
* html #nav .sub_active a:hover .sub_sub {
	z-index:-1;
	margin-top:0;
	margin-t\op:1px;
}

#nav .sub_active a {
	height:36px;
	text-decoration:none;
	line-height:35px;
	white-space:nowrap;
	display:block;
	float:left;
	margin:0;
	white-space:nowrap;
	border:0;
	color:#fff;
	padding-right:17px;
	padding-left:9px;
	font-size:11px;
	background-image:url(../../images/pixel.gif);
}

#nav .select a:hover .sub li a,
#nav .select li:hover .sub li a,
#nav .select .sub a:hover .sub_sub li a,
#nav .select .sub li:hover .sub_sub li a,
#nav .sub_active a:hover .sub_sub li a,
#nav .sub_active li:hover .sub_sub li a {
	display:block;
	margin:0;
	white-space:nowrap;
	border:0;
	color:#fff;
    text-transform:none !important;
	font-size:11px;
	padding-right:17px;
	padding-left:9px;
}

für diejenigen, die's interessiert, hier auch mein javascript-Schnipsel, der die jeweils schon ohne Mauskontakt aktiven Menüebenen verschwinden läßt, damit ich mit einem transparenten Hintergrund arbeiten kann:

Code:

function getElementsByClassName(oElm, strTagName, strClassName){
	var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
	var arrReturnElements = new Array();
	strClassName = strClassName.replace(/\-/g, "\\-");
	var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
	var oElement;
	for(var i=0; i<arrElements.length; i++){
		oElement = arrElements[i];
		if(oRegExp.test(oElement.className)){
			arrReturnElements.push(oElement);
		}
	}
	return (arrReturnElements)
}
function navhide(classe) {
	var hide_element = getElementsByClassName(document.getElementById("nav"), "*",  classe);
	for (var i=0; i<hide_element.length; i++) {
		hide_element[i].className = "non_"+classe;
	}
}

function navshow(classe) {
	var hide_element = getElementsByClassName(document.getElementById("nav"), "*", "non_"+classe);
	for (var i=0; i<hide_element.length; i++) {
		hide_element[i].className = classe;
	}
}

Das Problem noch einmal ganz konkret: Die Menüpunkte "Unterpunkt 31" und "Unterpunkt 33" haben jeweils Sub-Unterpunkte, die im IE6 nicht erscheinen. Die Sub-Punkte unter "Unterpunkt 41" hingegen erscheinen.

Ich würde mich sehr freuen, wenn einer von Euch den Fehler entdecken würde und mir hilft... ich bin wahrscheinlich einfach nur schon blind vom Draufgucken...

Chellisa

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Redesign für Steiner Cycling Team	pkipper	Site- und Layoutcheck	11	09.02.2011 12:25
Padding Problem mit Internet Explorer	spinne84	CSS	2	03.05.2007 15:04
css layout und internet explorer problem	azzzbo	CSS	7	06.02.2007 21:40
IE6 Problem mit CSS Menü	träumer	CSS	2	15.01.2007 16:55
Problem mit CSS und Internet Explorer!	Berki	CSS	2	09.08.2004 10:39