title: Bootstrap dropdowns menus appearing behind other elements - IE7
body: <p>I'm using Bootstrap 2.3.1 <a href="http://twitter.github.io/bootstrap/index.html" rel="noreferrer">http://twitter.github.io/bootstrap/index.html</a></p>
  
  <p>So I'm using their 'dropdown-menu' class to create some simple quick use dropdown menus, but for some reason on <strong>IE7</strong> they are appearing behind text and other elements on my site.</p>
  
  <p><strong>Test Link:</strong> <a href="http://leongaban.com/_projects/defakto/CDS/" rel="noreferrer">http://leongaban.com/_projects/defakto/CDS/</a></p>
  
  <p>I added z-index to my CSS, but still doesn't seem to do anything, please help!</p>
  
  <pre><code>.header .header-nav ul#nav-account ul.dropdown-menu,
  .header .header-nav ul#nav-library ul.dropdown-menu {
      z-index: 10000;
  }
  </code></pre>
  
  <p>IE9, Chrome, FF and other modern no headache browsers:
  <img src="https://i.stack.imgur.com/pH6DS.gif" alt="enter image description here"></p>
  
  <hr>
  
  <p>IE7 >:(<br>
  <img src="https://i.stack.imgur.com/AzPvc.gif" alt="enter image description here"></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="header-nav"&gt;
  
  &lt;ul id="nav-account" role="navigation" class="pull-right"&gt;
  
      &lt;!-- Language Dropdown Button --&gt;
      &lt;li id="language-btn"&gt;
          &lt;a href="#" id="drop1" class="dropdown-toggle" data-toggle="dropdown"&gt;English&lt;/a&gt;
          &lt;img src="img/header-small-down-arrow.png" alt="grey triangle"/&gt;&lt;!-- &lt;span class="grey_triangle"&gt;&lt;/span&gt;--&gt;
  
          &lt;!-- Language Dropdown Menu--&gt;
          &lt;ul class="dropdown-menu" role="menu" aria-labelledby="drop1"&gt;
              &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;English&lt;/a&gt;&lt;/li&gt;
              &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Spanish&lt;/a&gt;&lt;/li&gt;
              &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;German&lt;/a&gt;&lt;/li&gt;
              &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Japanese&lt;/a&gt;&lt;/li&gt;
              &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;Chinese&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  
      &lt;!-- User Dropdown Button --&gt;
      &lt;li id="account-btn"&gt;
          &lt;a href="#" id="drop2" class="dropdown-toggle" data-toggle="dropdown"&gt;Logout&lt;/a&gt;
          &lt;img src="img/header-small-down-arrow.png" alt="grey triangle"/&gt;
          &lt;!-- &lt;span class="grey_triangle"&gt;&lt;/span&gt; --&gt;
  
          &lt;!-- User Dropdown Menu--&gt;
          &lt;ul class="dropdown-menu" role="menu" aria-labelledby="drop2"&gt;
              &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="http://google.com"&gt;Logout&lt;/a&gt;&lt;/li&gt;
              &lt;li role="presentation"&gt;&lt;a role="menuitem" tabindex="-1" href="#anotherAction"&gt;Account&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>