Layering problem with jQuery accordion and IE7

Question

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.

The problem is that in IE7 once I had hover over the menu, the borders from the underlying main 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?

I've already solved this problem and will post the solution as an answer.

<div id="main" style="position: relative;">
    <div id="main-menu">
        <ul id="navigation" class="ui-accordion">
            <li>
                <div class="ui-accordion-header">
                </div>
                <div class="ui-accordion-content">
                </div>
            </li>
        </ul>
    </div>
</div>

CSS

#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;
}

Answer 1

After trying to explicitly set a z-index on the various .ui-accordion classes, I decided to back up one level. It turns out that setting a z-index (of 1) on the main-menu DIV solves the problem in IE7. Note that the z-index on the main .ui-accordion class was always there. Applying the ui-accordion class to the main-menu div breaks the layout and I figured it was easier to simply add the z-index to the main-menu, too, rather than try to restyle it so that works with the ui-accordion class applied.