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

I'm stumped on this. Ive attempted to put in position:relative and various z-index in to no avail. Below is my code for a simple drop-down menu. It works fine in every browser except IE.

我很难过。香港专业教育学院试图把位置:相对和各种z指数无济于事。下面是我的简单下拉菜单的代码。它在除IE之外的每个浏览器中都能正常工

html page:

    <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: (formatting didn't work on here) http://pastebin.com/raw.php?i=CjyQhXCs

CSS :(格式化不起作用)http://pastebin.com/raw.php?i=CjyQhXCs

2 个解决方案

#1

Try using position: relative and z-index: 100 on the id=nav div. Z-indexes work in layers. If the parent of an element has a z-index of 0, and the that element has a z-index of 100, the element would still appear behind another element that is the sibling of the parent with a z-index of 1.

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

The issue was a direct result of using the filter on the #navul ul. Somewhere in its calculations IE makes the element automatically hide any overflow. To fix, move the background to its own element and absolutely position it.

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

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

Credit to:

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

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

#2

Just like @Stu, I had a filter on my nav ul (in my case, .navbar):

就像@Stu一样,我的nav ul(在我的例子中是.navbar)有一个过滤器:

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

Per @Greg, as soon as I removed that filter, the dropdown menu stayed on top of the page content in IE9. Thank you, saved my day!

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

#1