Question

我有一个标准的纯CSS下拉菜单，需要支持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; 
}

任何帮助都将不胜感激。

Answer 1

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

它在IE7中完美适用于我 codepen

IE7下拉列表消失 - 不是由位置固定：相对于父级

1 个答案: