CODEWITHSUNDEEP
htmlcssinternet-explorerdrop-down-menu
TStu
TStu

Reputation: 244

Dropdown menus not being displayed in IE (hidden behind content)

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.

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

Upvotes: 1

Views: 1544

Answers (2)

ClarityK
ClarityK

Reputation: 1

Just like @Stu, I had a filter on my nav ul (in my case, .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!

Upvotes: 0

Greg Rozmarynowycz
Greg Rozmarynowycz

Reputation: 2085

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.

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.

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

Credit to:

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

Upvotes: 5

Related Questions