CSS Sous-menu Horizontal

Question

Je travaille sur un menu déroulant CSS horizontal. Il fonctionne toujours très bien pour IE 7, IE 8, Firefox et Chrome. Mais je veux que le top <ul> soit au niveau supérieur (par exemple z-index: 100). Je veux cela parce que le niveau supérieur <ul> a un arrière-plan graphique et le menu déroulant est juste stylisé avec CSS et de la manière actuelle, il détruit la mise en page.

Code 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 code

/* 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; 
} 

J'ai encore un problème avec montrant la table dans IE 6 mais mon principal problème ici est de montrer la LINK1 ... 6 sous les liens TOP.

J'ai essayé beaucoup de paramètres avec z-index mais rien n'a fonctionné ici. J'espère que vous pouvez me aider;)

Answer 1

Essayez ceci:

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