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 ... TOP鏈接。

我已經嘗試了很多設置與z-index但沒有在這裏工作。 我希望你能幫助我。）

Answer 1

試試這個：

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