Vous essayez de faire en sorte que le sous-menu se chevauche dans IE dans le menu principal lors du redimensionnement de la fenêtre sans utiliser JS?

Question

Je suit css menu:

http://img233.imageshack.us/img233/4268/screenshot006jw.png

Le menu fonctionne très bien, sauf bien sûr IE6 et IE7.

Voici un code:

CSS (principalement pour IE, comme pour les autres navigateurs):

.menu { 
    height:25px; 
    position:fixed; 
    z-index:100; 
    font-family:arial, sans-serif; 
} 
* html .menu { 
    z-index:100; 
} 
.menu ul { 
    padding:0; 
    margin:0; 
    list-style-type:none; 
    z-index:90; 
} 
.menu ul ul { 
    visibility:hidden; 
    position:realtive; 
    height:0; 
    top:30px; 
    left:0; 
    width:140px; 
    border-top:1px solid #000; 
    z-index:120; 
} 
* html .menu ul ul { 
    top:30px; 
    t\op:30px; 
    z-index:120; 
    postion:relative; 
} 
.menu table { 
    top:0; 
    left:0; 
    border-collapse:collapse; 
    z-index:120; 
    postion:relative; 
} 
.menu li { 
    float:left; 
    width:auto; 
    position:relative; 
    z-index:100; 
} 
.menu a, .menu a:visited { 
    display:block; 
    font-size:12px; 
    text-decoration:none; 
    color:#fff; 
    width:auto; 
    height:30px; 
    border:1px solid #000; 
    border-width:1px 0px 1px 1px; 
    background:#09c; 
    padding-left:10px; 
    line-height:29px; 
    font-weight:bold; 
} 
* html .menu a, * html .menu a:visited { 
    width:120px; 
    w\idth:120px; 
} 

.menu ul ul a.drop, .menu ul ul a.drop:visited { 
    background:#AD0101; 
    z-index:100; 
} 
.menu ul ul a.drop:hover{ 
    background:#AD0101; 
    z-index:100; 
} 
.menu ul ul a, .menu ul ul a:visited { 
    background:#AD0101; 
    color:#fff; 
    height:auto; 
    line-height:1em; 
    padding:5px 10px; 
    width:140px; 
    border-width:0 1px 1px 1px; 
    z-index:100; 
} 
* html .menu ul ul a, * html .menu ul ul a:visited { 
    width:140px; 
    w\idth:140px; 
    z-index:100; 
} 
.menu ul li:hover ul, 
.menu ul a:hover ul{ 
    visibility:visible; 
} 

Et c'est le HTML syntaxe J'utilise:

<div class="menu"> 
    <ul> 
     <li><a class="hide mittel" href="#">MenuItem1 
      <!--[if IE 7]><!--></a><!--<![endif]--> 
      <!--[if lte IE 6]> 
      <table><tr><td> 
      <![endif]--> 
      <ul> 
       <li><a href="#">Sub1</a></li> 
       <li><a href="#">Sub2</a></li> 
      </ul> 
      <!--[if lte IE 6]> 
      </td></tr></table> 
      </a> 
      <![endif]--> 
     </li> 
     <li><a class="hide mittel" href="#">MenuItem2 
     <!--[if IE 7]><!--></a><!--<![endif]--> 
     <!-- more menu-items ... --> 
    </ul> 
</div> 

Voici le problème que je vois lorsque je le teste dans IE 6-7:

Lorsque je redimensionne la fenêtre, le menu principal est en deux lignes, mais il semble bien, aucun problème de mise en page. Lorsque je survole un élément de la première ligne qui a un sous-menu, les éléments du sous-menu ne chevauchent pas le menu principal ... Comme vous pouvez le voir, j'ai essayé l'index z, mais je suppose que cela ne change rien ou Je l'ai mal fait. Alors, comment faire pour que le sous-menu chevauche le menu principal lorsque la fenêtre est redimensionnée sans utiliser Javascript? Thnx d'avance!

Answer 1

1) .menu ul ul {position: relative;} non réel.

2) Si cela ne résout pas le problème, rendez la position du sous-menu absolue. IE6 et IE7 honorent l'index z des objets avec un positionnement absolu supérieur à tout autre z-index défini.