試圖使子菜單重疊主窗口IE瀏覽器窗口調整大小W/O使用JS？

Question

我有以下的CSS菜單：

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

菜單工作正常，但無處不在IE6和IE7。

下面是一些代碼：

CSS（主要針對IE瀏覽器，其他瀏覽器類似）：

.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; 
} 

這是HTML語法我用：

<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> 

下面是我在IE 6-7中測試時看到的問題：

正如你所看到的截圖： 當我調整窗口的大小，主菜單是在兩行，但看起來不錯，沒有layoutproblems任何。當我將鼠標懸停在具有子菜單的第一行的項目上時，子菜單項不會與主菜單重疊......正如您所看到的，我已嘗試過z-index，但我想這或者不會改變任何內容或我做錯了。那麼當窗口調整大小而不使用Javascript時，如何使子菜單與主菜單重疊？ Thnx提前！

Answer 1

1）.menu ul ul {position：relative;} not realtive。

2）如果這樣不能解決問題，使子菜單的位置是絕對的。 IE6和IE7使用絕對定位的對象的z-index優於任何其他定義的z-index。