why isn't z-index working in IE?

I've created a top level menu with dropdowns but the drop down isn't coming to the front in IE. Chrome, FF, and Safari work great.

My code looks like this:

<li id="s开发者_如何学Goearch"><a href="#search" class="drop" >Search</a>
    <div class="drop2columns dropcontent">
        <div class="col_2">
            <ul>
                <li id="search_basic"><a href="#test1">Test1</a></li>
                <li id="search_advanced"><a href="#test2">Test2</a></li>
            </ul>   
        </div>
    </div>
</li>

The css files look like this:

#menu .drop2columns {width: 130px;}

#menu .col_2 {
    display:inline;
    float: left;
    position: relative;
    margin-left: 15px;
    margin-right: 15px;
    z-index: 9999;
}

#menu .col_2 {width:130px;}

What am I missing? Like I said this only happens with IE (versions 7,8, and 9)

z-index and IE was always a nightmare.

There's several workarounds about, see http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/ for one of them.

z-index doesn’t work correctly in Internet Explorer: positioned elements create a new stacking context, starting with a z-index of 0. To get around this you can make the parent element positioned (e.g., position: relative), and set its z-index to a value higher than that of the child.