1

我被这件事难住了。我试图将 position:relative 和各种 z-index 放入无济于事。下面是我的简单下拉菜单代码。它在除 IE 之外的所有浏览器中都能正常工作。

html页面：

    <div id="nav">
 <ul id="navul">
  <li id="rootHome">
    <ul id="Home"></ul><a href="index.php"><img src="images/LA-icon.png" style=
    "height: 40px;" id="home" /></a>
  </li>
  <li id="rootProducts" onclick="showMenu(this)">Products
    <ul id="Products">
      <li>
        <p class="navLink" onclick="changePage('products-1.php')">Product 1</p>
      </li>
      <li>
        <p class="navLink" onclick="changePage('products-2.php')">Product 2</p>
      </li>

      <li>
        <p class="navLink" onclick="changePage('products-3.php')">Product 3</p>
      </li>
    </ul>
  </li>
  <li id="rootNews">
    <a href="#Link for news" class="navLink">News</a>
  </li>
  <li id="rootCompany" onclick="showMenu(this)">Company &acirc;&circ;&uml;
    <ul id="Company">
      <li>
        <p class="navLink" onclick="changePage('./company-aboutUs.php')">About Us</p>
      </li>
      <li>
        <p class="navLink" onclick="changePage('./company-contactUs.php')">Contact
        Us</p>
      </li>
    </ul>
  </li>
</ul>

CSS：（格式化在这里不起作用） http://pastebin.com/raw.php?i=CjyQhXCs

4

2 回答 2

5

尝试在div上使用position: relative和。Z 索引分层工作。如果一个元素的父元素的 z-index 为 0，而该元素的 z-index 为 100，则该元素仍将出现在另一个元素的后面，该元素是 z-index 为 1 的父元素的兄弟元素。z-index: 100id=nav

该问题是filter在#navul ul 上使用的直接结果。IE 在其计算中的某处使元素自动隐藏任何溢出。要修复，请将背景移动到它自己的元素并绝对定位它。

http://jsfiddle.net/uTBZN/30/

归功于：

如何阻止 Internet Explorer 的专有渐变过滤器截断应该溢出的内容？

于 2012-08-07T02:41:55.567 回答
0

就像@Stu 一样，我的导航栏上有一个过滤器（在我的例子中是 .navbar）：

.navbar {
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#64d7f4',GradientType=0 ); /*  IE6-9 */
}

根据@Greg，一旦我删除了该过滤器，下拉菜单就会停留在 IE9 页面内容的顶部。谢谢你，拯救了我的一天！

于 2016-01-20T18:53:33.320 回答