CSS Горизонтальное подменю

Question

Я работаю над горизонтальным выпадающим меню CSS. Это все еще работает почти нормально для IE 7, IE 8, Firefox и Chrome. Но я хочу, чтобы вершина <ul> была на верхнем уровне (например, z-index: 100). Я хочу этого, потому что верхний уровень <ul> имеет графический фон, а выпадающий просто стилизован с помощью css и в настоящее время разрушает макет.

HTML код:

<div id="mainMenu"> 
    <ul> 
        <li><a href="t1">TOP1<!--[if gt IE 6]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]--> 
            <ul> 
                <li><a href="l1">LINK1</a></li> 
                <li><a href="l2">LINK2</a></li> 
                <li><a href="l3">LINK3</a></li> 
                <li><a href="l4">LINK4</a></li> 
            </ul>
        <!--[if lte IE 6]></td></tr></table></a><![endif]--> 
        </li>
        <li class="center"><a href="t2">TOP2<!--[if gt IE 6]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td></td></tr></table></a><![endif]--></li>
        <li><a name="t3">TOP3<!--[if gt IE 6]><!--></a><!--<![endif]--> 
        <!--[if lte IE 6]><table><tr><td><![endif]--> 
            <ul class="last"> 
                <li><a href="l5">LINK5</a></li> 
                <li><a href="l6">LINK6</a></li>
                <li><a href="l7">LINK7</a></li>
            </ul> 
        <!--[if lte IE 6]></td></tr></table></a><![endif]--> 
        </li> 
    </ul>
</div>

Код CSS

/* style the outer div to give it width */
#mainMenu {
    position: absolute;
    margin-left: 6px;
    margin-top: 180px;
}

/* remove all the bullets, borders and padding from the default list styling */
#mainMenu ul {
    position: absolute;
    width: 494px; 
    padding: 0;
    margin: 0;
    list-style-type: none;
    background: #FFF url(../images/mainMenu_bg.gif) no-repeat;
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
#mainMenu li {
    position: relative;
    float: left;
    padding-left: 5px;
    width: 160px;
    vertical-align: middle;
    text-align: left;
}

#mainMenu li.center {
    padding-left: 0px;
    text-align: center;
}

/* style the links for the top level */
#mainMenu a, #mainMenu a:visited {
    display: block;
    font: bold 12px/1em Helvetica, arial, sans-serif;
    color: #FFF;
    text-decoration: none;
    height: 42px;
    line-height: 35px;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
#mainMenu ul ul {
    visibility: hidden;
    position: absolute;
    height: 0;
    top: 35px;
    left: -5px;
    width: 165px;
}

/* style the table so that it takes no part in the layout - required for IE to work */
#mainMenu table {
    position: absolute; 
    top: 0;
    left: 0;
}

/* style the second level links */
#mainMenu ul ul a, #mainMenu ul ul a:visited {
    width: 165px;
    height: 20px;
    line-height: 19px;
    font: bold 10px Helvetica, arial, sans-serif;
    background: #EF7D0E;
    color: #FFF;
    text-align: left;
    padding: 6px 0 0 5px;
    border-top: 1px solid #C1650B;
}

#mainMenu ul ul.last a, #mainMenu ul ul.last a:visited {
    width: 162px;
}

/* style the top level hover */
#mainMenu a:hover, #mainMenu ul ul a:hover{
    color: #FFF; 
    text-decoration: underline;
}

#mainMenu :hover > a, #mainMenu ul ul :hover > a {
    color: #FFF;
    text-decoration: underline;
}

/* make the second level visible when hover on first level list OR link */
#mainMenu ul li:hover ul,
#mainMenu ul a:hover ul{
    visibility: visible; 
}

У меня все еще есть проблема с отображением таблицы в IE 6, но моя главная проблема здесь - показать LINK1 ... 6 под ТОП-ссылками.

Я перепробовал множество настроек с z-index, но здесь ничего не получалось. Я надеюсь, что вы можете мне помочь;)

Answer 1

Попробуйте это:

div#mainMenu ul
{
  position:relative;
  z-index:100;
}