Question

我很难过。香港专业教育学院试图把位置：相对和各种z指数无济于事。下面是我的简单下拉菜单的代码。除了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

Answer 1

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

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

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

感谢：

How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?

Answer 2

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

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

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

下拉菜单未在IE中显示（隐藏在内容后面）

2 个答案: