title: Twitter Bootstrap button dropdown not working in IE9
body: <p><strong>UPDATE:</strong> Ok, I found the cause. The grey area where the button resides is a div for the navigation. It has fixed position and a high z-index to make it float above other elements. This is what's causing the problem. If I remove the z-index of the parent DIV, it works fine. But I can't do that because the other elements will then overlap the fixed navigation div.</p>
  
  <p><strong>How it's Supposed to Look like (FIREFOX)</strong></p>
  
  <p><img src="https://i.stack.imgur.com/8hasf.jpg" alt="How it&#39;s Supposed to Look like (FIREFOX)"></p>
  
  <p><strong>How it is rendered in IE (9)</strong></p>
  
  <p><img src="https://i.stack.imgur.com/hMDoK.jpg" alt="How it is rendered in IE (9)"></p>
  
  <p>Full Code:</p>
  
  <pre><code>&lt;div class="btn-group pull-right"&gt;
      &lt;a class="btn btn-primary btn-large dropdown-toggle" style="font-weight: bold; margin-top:15px" data-toggle="dropdown"&gt;
      Hi @User.Identity.Name!
      &lt;span class="caret"&gt;&lt;/span&gt;
      &lt;/a&gt;
      &lt;ul class="dropdown-menu"&gt;
          &lt;li&gt;&lt;a href="@Url.Action("Index","Lab")"&gt;Open the Lab&lt;/a&gt;&lt;/li&gt;
          &lt;li class="divider"&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/Account/LogOff"&gt;Log-out&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Anyone got any ideas or workarounds/overrides I need to put in the CSS to cover this problem?</p>