IE7 Z-Index issue - Context Menu

I have the following button with associated context menu

    <div class="control-action"> 
        <button>Action</button> 
        <ul style="display:none">
            <li class="action-remove">Remove</li>
            <li class="action-detail">Detail</li>
            <li class="开发者_如何学Goaction-assigned">Assign</li>
        </ul>
    </div> 

When the button is clicked the associated ul shows beneath it as a context menu.

This is working great on all browsers except IE 7. In IE7 the context menu (ul) shows beneath the button below it. I imagine this is likely due to how the stacking context is resolving these elements.

My css currently looks like this:

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

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

Any ideas as to what I'm doing wrong?

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.

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;
}

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.

Could be the hasLayout bug.

This may help: IE7 relative/absolute positioning bug with dynamically modified page content