Z-Index Bug bei IE7

[jay]

Hallo!

Ich habe ein kl. Z-Index-Problem im IE7 (Overlay). Alle Lösungen, die zu diesem Problem vorgeschlagen wurden, habe ich bereits ausprobiert. Leider ohne Erfolg. Vlt. könnt Ihr mir weiterhelfen.

Problem ist wohl das "position:relative;" in der Class ".hover-menu li". Wenn ich dies entferne, kommt es zu keinem Overlay des Tooltip und der 2. Spalte des Menüs. Sprich die Texte in der 2. Spalte liegen über dem Tooltip.
"position:relative;" benötige ich allerdings zur Ausrichtung der einzelnen Menüeinträge.

###############################
#  Spalte 1    #   Spalte 2   #
#              #              #
##########################    #

Tooltip über Link      #    #

##########################    #
#              #              #
#              #              #
#              #              #
###############################

Hier mal ein bisschen Code ...

CSS

  
  .hover-menu {  
	z-index:499;  
	padding: 0;  
	float:right;  
	position:relative;  
	left: -32px;  
	margin: 37px 0 0 0;  
  }  
  .hover-menu ul.categories {  
        padding: 0;  
	margin: 0;  
	list-style-type: none;  
	z-index:10;  
  }  
  .hover-menu li {  
  	float: left;  
        position:relative;  
	margin-left: 23px;  
  }  
  .hover-menu a, .hover-menu a:visited {  
	display: block;  
  }  
  .hover-menu ul div.submenu {  
	position:absolute;  
        visibility:hidden;  
	z-index: 10;  
	border: solid 1px #8c8b8b;  
	top: 0px;  
	left: 0px; 	  
	text-transform: uppercase;  
	font-size: 11px;  
	color: #5c5c5e;  
  }  
  .hover-menu ul div.submenu li {  
	margin-left: 0;  
  }  
  .hover-menu ul div.pens {  
        position: absolute;  
        left:0;  
        width:720px;  
  }  
  .hover-menu ul li:hover div.submenu, .hover-menu ul li a:hover div.submenu {  
        visibility:visible; 	  
  }  
  .hover-menu ul :hover ul ul {  
        visibility:hidden;  
  }  
  .hover-menu ul :hover ul :hover ul {  
        visibility:visible;  
  }  
  .inlinemenu {  
        list-style:none;  
	float:left;  
	width:168px;  
	padding: 0 5px 5px 5px;  
	margin-bottom: 10px;  
  }  
  .inlinemenu li {  
        float:none;  
	line-height: 15px;  
  }  
  .inlinemenu li a {  
        display:block;  
  	line-height: 15px;  
	height: 15px;  
        padding: 4px 5px 4px;  
	color:#757575;  
	text-decoration: none;  
  }  
  .inlinemenu li a:hover {  
        color: #fff;  
	padding: 4px 5px 4px;  
	text-decoration:none;  
	background: #757575;  
  }  
  
/* TOOLTIP */  
  a.tooltip { color: #fff; }  
  a.tooltip b {visibility: hidden;}  
  a.tooltip:hover {border:0; position:relative; text-decoration:none;}  
  a.tooltip:hover b {visibility: visible; position:absolute; top:-8px; z-index:500; left:70px; padding:8px; font-weight:normal; color:#000; border:1px solid #8c8b8b; background:#fff; min-width:150px; width: auto !important; width:150px;}  
  a.tooltip:hover img { margin:0; }  
  a.tooltip:hover b em.tooltip-arrow { background:url(../img/tooltip-arrow.png) no-repeat; position:absolute; left:-13px; top:10px; width: 13px; height:17px; }  

HTML

  
<div id="main-navigation" class="hover-menu">  
  <ul class="categories">  
    <li><a href="#" class="main">Menü 1</a>  
      <div class="submenu pens">  
	 <div class="content">  
           <ul class="inlinemenu">  
             <li><a class="tooltip" href="#">Untermenü 1. Spalte<b><em class="tooltip-arrow"></em><img src="#" /></b></a></li>  
           </ul>  
           <ul class="inlinemenu">  
              <li>Untermenü 2. Spalte</li>  
           </ul>  
        </div>  
      </div>  
    </li>  
    <li><a href="#" class="main">Menü 2</a>  
      [...]  
    </li>  
  </ul>  
</div><div class="float-clear"></div>  
  

Danke & LG jay

[apsel]

Om nah hoo pez nyeetz,

Hast du schon von der Möglichkeit Gebrauch gemacht, dein CSS zu validieren? Im FF zum Beispiel über das AddOn CSS-Validator.

Matthias

[Beat]

Problem ist wohl das "position:relative;" in der Class ".hover-menu li".

Welche Listenebene willst du damit selektieren?

mfg Beat