IE7的下拉列表消失 - 不固定的位置：父母的相對

我有一個標準的純CSS下拉菜單，需要支持回IE10 IE7。我的錯誤是，當用戶將鼠標移動到鏈接上時，子菜單將消失。IE7的下拉列表消失 - 不固定的位置：父母的相對

我一直在閱讀有關IE7堆疊內容，這是我的理解，我應該能夠設置{ position: relative; z-index: (something large); }我的菜單的父元素對付消失的子菜單。

這並不適用於我，我無法在我的頁面內容中找到任何可能比菜單具有更高Z-index的內容。（首先，菜單上沒有任何東西被繪製。）有什麼線索？這裏是我的標記（或見Codepen）：

<div class="mainmenu"> 
    <div class="row"> 
    <a href="/" class="pull-left"> 
     <img src="logo.png" class="logo"> 
    </a> 
    <ul class="nav-main"> 
     <li><a href="/">Item 1</a></li>    
     <li><a href="/">Item 2</a></li>    
     <li><a class="dropdown">Item 3 </a> 
     <ul class="nav-sub"> 
      <li><a href="#">Sub-Item 1</a></li> 
      <li><a href="#">Sub-Item 2</a></li> 
      <li><a href="#">Sub-Item 3</a></li> 
     </ul> 
     </li>    
     <li><a class="dropdown">Item 4 </a> 
     <ul class="nav-sub"> 
      <li><a href="#">Sub-Item 1</a></li> 
      <li><a href="#">Sub-Item 2</a></li> 
      <li><a href="#">Sub-Item 3</a></li> 
     </ul> 
     </li> 
    </ul> 
    </div> 
</div> 

<div class="content"> 
    <!-- Then some page content --> 
</div>

的CSS（顏色刪除）：

.mainmenu { 
    position: relative; 
    top: 0; 
    z-index: 597; 
    width: 100%; 
    height: 66px; 
    margin: 0; 
    padding: 0 22px; 
} 
.mainmenu .logo { 
    height: 39px; 
    margin: 16.5px 0; 
    vertical-align: middle; 
} 
ul.nav-main { 
    margin: 0; 
    float: right; 
    padding: 0 20px; 
    position: relative; 
    top: 0; 
} 
ul.nav-main a, 
ul.nav-main li { 
    -webkit-transition: all 0.1s linear; 
    -moz-transition: all 0.1s linear; 
     -o-transition: all 0.1s linear; 
      transition: all 0.1s linear; 
} 
ul.nav-main li { 
    list-style-type: none;  
    padding: 22px 8px; 
    float: left; 
} 
ul.nav-main li a, 
ul.nav-main li span { 
    display: block; 
} 
ul.nav-main li:hover ul { 
    visibility: visible; 
    opacity: 1; 
} 
ul.nav-main ul.nav-sub { 
    visibility: hidden; 
    opacity: 0; 
    position: absolute; 
    padding: 0; 
    margin: 0; 
    top: 66px; 
} 

ul.nav-main ul.nav-sub li { 
    display: block; 
    float: none; 
    padding: 0; 
    outline: 1px solid #aaa; 
} 
ul.nav-main ul.nav-sub li a, 
ul.nav-main ul.nav-sub li span { 
    display: block; 
    padding: 11px; 
}

任何幫助，將不勝感激。

來源

2014-07-17 Drake Parker

我不認爲IE7支持'Z-index'對我的作品完美。看看[Caniuse.com]（http://caniuse.com/#search=z-index） – Jmh2013

感謝Fourthmeal，但我相信z-index是，並始終得到支持。不幸的是，它[古怪]（http://richa.avasthi.name/blog/2008/01/ie7-lessons-learned/）。 –

哎呀，你是對的。 [這]（http://stackoverflow.com/questions/1287439/ie7-z-index-layering-issues）問題似乎有一些很好的信息。也許它會幫助你。 – Jmh2013

ul.nav-main ul.nav-sub { 
    visibility: hidden; 
    opacity: 0; 
    position: absolute; 
    padding: 0; 
    margin: 0; 
    top: 100%; 
}

它在IE7

codepen

來源

2014-07-17 19:11:15 user3212461

IE7的下拉列表消失 - 不固定的位置：父母的相對

回答

相關問題