Camadas problema com jQuery acordeão e IE7

Question

Eu tenho um problema estranho com o jQuery acordeão plugin e IE7 (e talvez mais cedo, não testei lá). Eu estou usando um tema jQuery UI personalizado construído com ThemeRoller. Eu tweaked-lo um pouco para ajustar cores, margens e fronteiras. O acordeão está localizado dentro de uma DIV que é, por sua vez, aninhado em meu conteúdo principal. Simplificada marcar e CSS está abaixo. Basicamente, o conteúdo é uma caixa centrado cercada por fronteiras. O menu é compensado abaixo do topo da caixa e flutua ao longo da borda esquerda.

O problema é que no IE7 Uma vez tive pairar sobre o menu, as fronteiras do show main DIV subjacente através do acordeão. Isso não acontece no FF ou Safari. A pergunta é por que, já que os conjuntos acordeão CSS padrão um z-index de 1? não deve todos esses elementos exibir por cima dos elementos DOM por trás deles? E por que só em foco?

Eu já resolveu este problema e publicará a solução como uma resposta.

<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

Depois de tentar definir explicitamente um z-index nas várias classes .ui-acordeão, eu decidi fazer backup de um nível. Revela-se que a fixação de um índice z (de 1) sobre o DIV main-menu resolve o problema no IE7. Note-se que o índice z na classe .ui-acordeão principal foi sempre. Aplicando a classe ui-acordeão para as quebras main-menu div o layout e achei que era mais fácil simplesmente adicionar o z-índice para o main-menu, também, em vez de tentar remodelar-lo para que trabalha com a classe ui-acordeão aplicada .