✔ Ie6+7 - Listen in- und übereinander

[MsvP@habdichliebhasi]

Hi zusammen,

habe da mal wieder ein Problem:

Ich habe ein Aufklapp Menü, dabei ist die Struktur folgende:

Im FF klappt alles wie es soll. Aber im IE6 + 7 verdecken alle folgenden Menüpunkte das Submenü.

Ich möchte keinen Link zur Seite posten, da es sich um eine kommerzielle Seite handelt und ich keine Werbung machen will. Aber hier der Code (Habe das Submenü dabei momentan festeingeblendet):

HTML:

<div id="menu">
<ul id="nav">
   <li>Menüpunkt 1
         <ul>
              <li>Submenü 1</li>
          <ul>
   </li>
   <li>Menüpunkt 2</li>
</ul>
</div>

CSS:

#menu {
	position:absolute;
	top:130px;
	left:20px;
	width:256px;
	min-height:240px;
	height:auto !important;
	height:240px!;
	z-index:400;
}

#menu ul {
	list-style-type:none;
	z-index:500;
	float:left;
}

#menu li {
	background-image:url(../img/menu_bg.png);
	width:256px;
	height:57px;
	margin-bottom:2px;
	line-height:57px;
	position: relative;
	float:left;
}

#menu li a {
	margin-left:35px;
	font-size:11pt;
	color:#7f7f7f;
	text-decoration:none;
	width:200px;
	display:block;
	background-image:url(../img/arrow_grey_right.jpg);
	background-repeat:no-repeat;
	background-position:right;
}

#menu li.cur a, #menu li a:hover {
	background-image:url(../img/arrow_green_right.jpg);
	color:#932221;
}

#menu li ul {
	position:absolute;
	left:240px;
	top:0px;
	height:auto;
	width:auto;
	filter:alpha(opacity=90);
	-moz-opacity:0.90;
	opacity:0.90;
	background-color:#FFFFFF;
}

#menu li ul li {
	background:none;
	height:auto !important;
	height:5px;
	padding:5px 25px;
	margin:0;
	line-height:normal;
	width:auto;
}

#menu li ul li a , #menu li.cur ul li a {
	width:auto;
	font-size:10pt;
	padding:0;
	margin:0;
	line-height:normal;
	background-image:none;
	color:#7F7F7F;
}

#menu li ul li a:hover, #menu li.cur ul li a:hover  {
	width:auto;
	font-size:10pt;
	padding:0;
	margin:0;
	line-height:normal;
	background-image:none;
	color:#932221;
}

Jemand eine Idee?

EDIT: Wenn ich aus "#menu ul" das "z-index:500;" entferne funktioniert es im FF auch nicht mehr. Kann es sein, dass der IE das ignoriert?

Lg
Micha

 

[Quaese]

Hi,

bei mir wird nichts verdeckt. Zumindest kann ich nichts erkennen.

Einen kleinen Fehler habe ich entdeckt.

<div id="menu">
<ul id="nav">
   <li>Menüpunkt 1
         <ul>
              <li>Submenü 1</li>
          </ul>
   </li>
   <li>Menüpunkt 2</li>
</ul>
</div>

Im schliessenden UL-Tag fehlt ein Slash.

An der Eigenschaft z-index sollte es nicht liegen, da diese nur bei relativ und absolut positionierten Elementen Wirkung zeigt.

Ciao
Quaese

 

[MsvP@habdichliebhasi]

Hm, das verstehe ich nicht.

Habe jetzt alles hin und her probiert. Ich hab schon die Vermutung, dass es eventuell an den Híntergrundbildern in den Menüpunkten liegt.

Der vergessene Abschlussstrich war aber nur ein Versehen, beim Abtippen, daran liegt es also auf keinen Fall.

Naja, absolut und relativ gesetzte Elemente sind dort ja zu genüge.

Lg
Micha

 

[Quaese]

Hi,

es gibt schon ausreichend relativ und absolut positionierte Elemente. Nur das Element selbst, das den z-index erhält ist "normal" positioniert.

Vielleicht kannst du das Menue allein online stellen. Da kann eventuell besser geholfen werden.

Ciao
Quaese

 

[MsvP@habdichliebhasi]

Ja, ich werde mir das morgen noch einmal in Ruhe anschauen und ggf. eine Kopie hochspielen.

Danke auf jedenfall schonmal.

 

[MsvP@habdichliebhasi]

So, ich habe die Seite jetzt kopiert und aufs minimalste abgespeckt und das ist der Hintergrund und das Menü.

Im FF und IE8 läuft es ohne Probleme. Nur im IE 6 +7 schiebt sich das Submenü hinter die nachfolgenden Hauptmenüpunkte:

CSS Menu Bug

Vielen Danke,
Micha

 

[Quaese]

Hi,

folgenden Lösungsvorschlag hätte ich:

Zunächst werden die unsortierte Liste der Untermenüpunkte in ein DIV gepackt.

<div id="menu">
  <ul id="nav">
    <li class="cur"><a href="/willkommen/">Willkommen</a></li>
    <li><a href="/moduluebersicht/">Modulübersicht</a>
      <div><ul>
        <li>  <nobr><a href="/module/angebotsrechner/">Angebotsrechner</a></nobr>  </li>
        <li>  <nobr><a href="/module/shop/">Shop</a></nobr>  </li>
        <!-- usw. -->
      </ul></div>
    </li>
    <li><a href="/video-session/">Video-Session</a></li>
    <li><a href="/administration/">Administration</a></li>
  </ul>
</div>

Zusätzlich werden für die IEs kleiner gleich der Version 7 folgende CSS-Definitionen in einem conditional comment angefügt:

<!--[if lte IE 7]>
<style type="text/css">
#nav li {
  position: static !important;
}
#nav li div{
  position:relative;
  top: -57px;
}
</style>
<![endif]-->

Vielleicht brigt dich das ja weiter.

Ciao
Quaese

 

[MsvP@habdichliebhasi]

Perfekt! Das wars. Vielen Dank!

Lg
Micha