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

Question

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">
News
</li>
<li id="rootCompany" onclick="showMenu(this)">Company ∨
<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

Answer 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.
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?

Answer 2

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!