title: HTML/CSS IE7 z-index bug
body: <p>Two problems, one biggy one little'n.</p>
  
  <p>I have a lovely dropdown menu that's giving me no grief in any other browser except IE7. In IE7 it seems to ignore the <code>z-index</code> value of the dropdown's containing <code>ul</code> and puts its behind the content like so:</p>
  
  <p><img src="https://i.stack.imgur.com/37CeQ.png" alt="Comparison of IE7 to firefox"></p>
  
  <p>The second problem is that (you will have to try the menu to see this) when the <code>ul</code> first appears after you hover over a menu item, it's width is small and it sort of pops into size. (Only in IE7 again)</p>
  
  <p>You can see the page in action here: <a href="http://rcnhca.org.uk/sites/first_steps/" rel="nofollow noreferrer">http://rcnhca.org.uk/sites/first_steps/</a></p>
  
  <p><strong>Here is the relevant HTML markup</strong> (note I am using the 960 grid system):</p>
  
  <pre><code>    &lt;div id="header"&gt;
          &lt;div class="container_16"&gt;
              &lt;div class="grid_16" id="breadcrumbs"&gt;
                  &lt;a href="http://rcnhca.org.uk/sites/first_steps" id="home" class="grid_1 alpha"&gt;&lt;/a&gt;
  
                  &lt;ul id="parent" class="grid_15 omega"&gt;
                  &lt;li&gt;&lt;a href="http://rcnhca.org.uk/sites/first_steps/"&gt;Select a topic&lt;/a&gt;&lt;ul class="child"&gt;&lt;li&gt;&lt;a href="http://rcnhca.org.uk/sites/first_steps/getting-started/"&gt;Getting started&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="http://rcnhca.org.uk/sites/first_steps/communication/"&gt;Communication&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="http://rcnhca.org.uk/sites/first_steps/health-safety-and-security/"&gt;Health, Safety and Security&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="http://rcnhca.org.uk/sites/first_steps/personal-and-people-development/"&gt;Personal and people development &lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="http://rcnhca.org.uk/sites/first_steps/quality/"&gt;Quality&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="http://rcnhca.org.uk/sites/first_steps/equality-diversity-and-rights/"&gt;Equality, diversity and rights &lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="http://rcnhca.org.uk/sites/first_steps/clinical-skills/"&gt;Clinical skills&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="http://rcnhca.org.uk/sites/first_steps/additional-material/"&gt;Additional material&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;/li&gt;                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;div id="supplements" class="grid_16"&gt;
  
  
                  &lt;div id="competency_checklist"&gt;&lt;a href="#"&gt;Competency checklist&lt;/a&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>And it's accompanying CSS</strong></p>
  
  <pre><code>/* =============================================================================
     Header
     ========================================================================== */
  
  #header {
      width: 100%;
      background: #44a9c4;
  }
  
  #supplements {
      height: 45px;
      background: #44a9c4;
      z-index: 1; /* ie7 bug fix */
  }
  
  #logobar {
      width: 100%;
      height: 45px;
      background: #3393b5;
      z-index: 1; /* ie7 bug fix */
  }
  
  #competency_checklist {
      display: block;
      float: left;
      margin-top: 5px;
      right: 0px;
      height: 31px;
      line-height: 31px;
      padding: 0 10px 0 36px;
      background-image: url(library/images/book-icon-white.png);
      background-position: 5px center;
      background-repeat: no-repeat;
      line-height: 31px;
  }
  
  #competency_checklist a{
      font-size: 0.938em;
      text-decoration: underline;
      color: #ffffff;
  }
  
  #competency_checklist a:hover{
      text-decoration: none;
  }
  
  /* =============================================================================
     Breadcrumb navigation
     ========================================================================== */
  
  
  #breadcrumbs {
      display: block;
      position: relative;
      height: 39px;
      padding-bottom: 3px;
      background: #ffffff;
      border: 0px solid;
      border-left: #3a90a7 2px solid;
      border-right: #3a90a7 2px solid;
      border-bottom: #3a90a7 2px solid;
      -webkit-border-bottom-left-radius: 5px;
      -webkit-border-bottom-right-radius: 5px;
      -moz-border-radius-bottomleft: 5px;
      -moz-border-radius-bottomright: 5px;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      behavior: url("&lt;?php echo get_template_directory_uri();?&gt;/PIE.php");
  }
  
  #breadcrumbs ul {
      list-style: none; 
      list-style-image: none; 
      margin: 0;
  }
  
  #breadcrumbs #home{
      display: block;
      height: 39px;
      background-image: url(library/images/home_icon.png);
      background-repeat: no-repeat;
      background-position: 19px center;   
      text-indent: -999em;
  }
  
  #breadcrumbs ul#parent {
      display: block;
      height: 39px;
      float: right;
      right: 3px;
      position: relative;
      background: #f38630;
      -webkit-box-shadow: inset 0px -2px 0px 0px #cf7229;
      -moz-box-shadow: inset 0px -2px 0px 0px #cf7229;
      box-shadow: inset 0px -2px 0px 0px #cf7229;
      -webkit-border-bottom-left-radius: 5px;
      -webkit-border-bottom-right-radius: 5px;
      -moz-border-radius-bottomleft: 5px;
      -moz-border-radius-bottomright: 5px;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
  }
  
  #breadcrumbs ul#parent li {
      position: relative;
      height: 39px;
      float: left;
      min-width: 1px; /* required to fix Opera bug */
      padding: 0 47px 0 15px;
      background-image: url(library/images/breadcrumb_seperator.png);
      background-repeat: no-repeat;
      background-position: right;
      line-height: 39px;
      zoom: 1;
  }
  
  #breadcrumbs ul#parent li a {
      display: block;
      height: 42px;
      position: relative;
      font-size: 0.938em;
      font-weight:900;
      color: #ffffff;
      text-decoration: none;
      text-shadow: 0px 2px 0px #cf7229;
  }
  
  #breadcrumbs ul li a:visited {
      color: #ffffff;
  }
  #breadcrumbs ul#parent li:first-child ul {
      left: -5px;
  }
  #breadcrumbs ul#parent li ul {
      position: absolute;
      z-index: 9998;
      left: -28px;
      top: 42px;
      background: #ffffff;
      border-left: #3a90a7 2px solid;
      border-right: #3a90a7 2px solid;
      border-bottom: #3a90a7 2px solid;
      -webkit-border-bottom-left-radius: 5px;
      -webkit-border-bottom-right-radius: 5px;
      -moz-border-radius-bottomleft: 5px;
      -moz-border-radius-bottomright: 5px;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      padding: 0 3px 0 3px;
      list-style-position: outside;
      min-width: 200px;
      width: auto;
  }
  
  .js #breadcrumbs ul#parent li ul {
      display:none;
  }
  
  .no-js #breadcrumbs ul#parent li ul {
      left: -999em;
  }
  
  #breadcrumbs ul#parent li ul li {
      float: none;
      display: block;
      position: relative;
      height: 26px;
      margin-bottom: 3px;
      padding: 0 15px;
      background-image: url(library/images/star-icon.png);
      background-position: -25px 50%;
      background-repeat: no-repeat;
      background-color: #738793;
      border-radius: 5px; 
      -moz-border-radius: 5px; 
      -webkit-border-radius: 5px;
      line-height: 26px;
      white-space: nowrap;
      zoom: 1;
  }
  
  #breadcrumbs ul#parent li ul li a{
      display: block;
      width: auto;
      color: #ffffff;
      text-decoration: none;
      text-shadow: none;
      font-weight: 100;
  }
  
  #breadcrumbs ul#parent li ul li:hover{
      background-color: #3393b5;
  }
  
  .no-js #breadcrumbs ul#parent li ul li:hover{
      background-position: 0px 50%;
      text-indent: 10px;
  }
  
  .no-js #breadcrumbs ul#parent li:hover ul {
      left: -5px;
  }
  
  /* =============================================================================
     Logo bar
     ========================================================================== */
  
  h1#logo {
      display: block;
      position: relative;
      height: 45px;
      background-image: url(library/images/logo.png);
      background-position: left 9px;
      background-repeat: no-repeat;
      text-indent: -999em;
  }
  </code></pre>
  
  <p><strong>Bonus points</strong> if you know how to make the menu items take up 100% of the <code>ul</code>'s width without hardcoding a width onto it.</p>
  
  <p>Thanks for your help.</p>