title: Layering problem with jQuery accordion and IE7
body: <p>I have a strange problem with the jQuery accordion plugin and IE7 (and maybe earlier, haven't tested there).  I'm using a customized jQuery UI theme built with ThemeRoller.  I've tweaked it some to adjust colors, margins, and borders.  The accordion is located inside a DIV which is, in turn, nested inside my main content.  Simplified mark up  and CSS is below.  Basically the content is a centered box surrounded by borders.  The menu is offset below the top of the box and floats over the left edge.</p>
  
  <p>The problem is that in IE7 once I had hover over the menu, the borders from the underlying <code>main</code> DIV show through the accordion.  This doesn't happen in FF or Safari.  The question is why, since the default accordion CSS sets a z-index of 1?  Shouldn't all of those elements display over the top of the DOM elements behind them?  And why only on hover?</p>
  
  <p>I've already solved this problem and will post the solution as an answer.</p>
  
  <pre><code>&lt;div id="main" style="position: relative;"&gt;
      &lt;div id="main-menu"&gt;
          &lt;ul id="navigation" class="ui-accordion"&gt;
              &lt;li&gt;
                  &lt;div class="ui-accordion-header"&gt;
                  &lt;/div&gt;
                  &lt;div class="ui-accordion-content"&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#main
  {
      clear: both;
      padding: 30px 30px 30px 30px;
      background-color: #fff;
      border: solid 1px #669933;
      margin-bottom: 30px;
      min-height: 500px;
      height: auto !important;
      height: 500px;
      _height: 1px; /* only IE6 applies CSS properties starting with an underscrore */
  }
  #main-menu
  {
      position: absolute;
      top: 1em;
      left: -1em;
  }
  
  #navigation
  {
      width: 10em;
  }
  
  /*UI accordion*/
  .ui-accordion {
      /*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.5; text-decoration: none; font-size: 100%; list-style: none;
      font-family: Verdana, Arial, sans-serif;
      font-size: 1.1em;
  /* additions from default */
      background-color: #ffffff;
      color: #333333;
      border: solid 1px #336600;
      text-indent: 0.2em;
      z-index: 1;
  }
  </code></pre>