IE7 Z-Index issue - Context Menu

Solution 1:

IE up to IE7 uses the nearest positioned ancestor to determine the stacking context. You seeing that in IE6 too?

Put your button after the ul and then try it.

Solution 2:

I have resolved this by changing the element ordering. I have removed the relative position element from containing both my button and menu, and made it only the parent of menu.

    <div class="control-action" style="float:right"> 
        <div class="control-action-menu">
            <ul style="display:none">
                <li class="action-remove">Remove</li>
                <li class="action-detail">Detail</li>
                <li class="action-assigned">Assign</li>
            </ul>
        </div>
        <button>Action</button> 
    </div> 

With this markup change the css has changed into the following:

.control-action
{
    text-align:right;
    width:100px;    
}

.control-action-menu
{
    position:relative;
    z-index:1;
}

.control-action ul
{
    position:absolute;
    z-index: 10000;
    list-style:none;
}

Solution 3:

IE7 has known bugs with z-index.

Without seeing your full page, the best I can do is point you to some resources which explain the issue:

• IE 6 & IE 7 Z-Index Problem
• IE7 Z-Index Layering Issues
• http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/
• http://richa.avasthi.name/blogs/tepumpkin/2008/01/11/ie7-lessons-learned/

The idea, in its most basic form, is to test adding/removing position: relative and z-index on parents of the problematic element until it's fixed.