# Z-index on list hiding underneath in IE

**URL:** https://forum.kirupa.com/t/z-index-on-list-hiding-underneath-in-ie/249800
**Category:** Uncategorized
**Created:** [January 22, 2008, 5:17pm UTC](https://forum.kirupa.com/t/z-index-on-list-hiding-underneath-in-ie/249800 "2008-01-22T17:17:39Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![alemieux34](https://avatars.discourse-cdn.com/v4/letter/a/7ea924/32.png) [@alemieux34](https://forum.kirupa.com/u/alemieux34)
#### Post date: [January 22, 2008, 5:17pm UTC](https://forum.kirupa.com/t/z-index-on-list-hiding-underneath-in-ie/249800/1 "2008-01-22T17:17:39Z")

</div>

I have a 2-tier list like this:

```auto
<ul id="nav">
<li><a href="#">Register/Enroll</a>
<ul>
<li><a href="#">Search Catalog</a></li>
<li><a href="#">All Courses</a></li>
</ul></li>
etc...

```

I’m using this drop\_down.js file to invoke the second tier onmouseover:

```auto
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes*;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;

```

The CSS that makes this happen is as follows:

```auto
li ul {
position: absolute;
z-index: 1;
display: none;
}
ul li a {
display: block;
}
li:hover ul, li.over ul {
display: block;
}

```

The problem is that the first item in the sub-navigation list appears correctly over the first list, but any subsequent links hide under the first list in IE 6 (WTF). I guess IE has a z-index bug issue, so I tried a JavaScript solution and it didn’t work.

Any ideas?