title: IE7 Z-Index issue - Context Menu
body: <p>I have the following button with associated context menu </p>
  
  <pre><code>    &lt;div class="control-action"&gt; 
          &lt;button&gt;Action&lt;/button&gt; 
          &lt;ul style="display:none"&gt;
              &lt;li class="action-remove"&gt;Remove&lt;/li&gt;
              &lt;li class="action-detail"&gt;Detail&lt;/li&gt;
              &lt;li class="action-assigned"&gt;Assign&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt; 
  </code></pre>
  
  <p>When the button is clicked the associated <code>ul</code> shows beneath it as a context menu.</p>
  
  <p>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.</p>
  
  <p>My css currently looks like this:</p>
  
  <pre><code>.control-action
  {
      position: relative;
      text-align:right;
      width:100px;    
  }
  
  .control-action ul
  {
      position:absolute;
      z-index: 10000;
      list-style:none;
  }
  </code></pre>
  
  <p>Any ideas as to what I'm doing wrong?</p>