CSS下拉菜單隱藏在div後面（已經嘗試過z-index）

我試圖在div上放置一個CSS子菜單，並且我已經嘗試過使用z-index，但它仍然不起作用。下面是HTML代碼：CSS下拉菜單隱藏在div後面（已經嘗試過z-index）

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Concurso</title> 
     <link type="text/css" rel="stylesheet" href="styles.css"> 
    </head> 
    <body> 
     <div id="frame-superior"> 
      <div id="menu"> 
      <ul> 
       <li> 
        <a href="#">HOME</a> 
       </li> 
       <li> 
        <a href="#">Receitas</a> 
        <ul> 
         <li><a href="#">Receita 1</a><li> 
         <li><a href="#">Receita 2</a><li> 
         <li><a href="#">Receita 3</a><li> 
        </ul> 
       </li> 
       <li> 
        <a href="#">O Concurso</a> 
       </li> 
       <li> 
        <a href="#">Edi&ccedil;&otilde;es anteriores</a> 
        <ul> 
         <li><a href="#">Edi&ccedil;&atilde;o 1</a><li> 
         <li><a href="#">Edi&ccedil;&atilde;o 2</a><li> 
         <li><a href="#">Edi&ccedil;&atilde;o 3</a><li> 
        </ul> 
       </li> 
       <li> 
        <a href="#">Contato</a> 
       </li> 
       </ul> 
      </div> 
     </div> 
     <div id="frame-inferior"> 
      <img id="but-inicial" src="but-inicial.jpg"/> 
     </div> 
    <body/> 
</html>

這裏是CSS代碼：

/* Contain floats: h5bp.com/q */ 
#menu > ul:before, #menu > ul:after { 
    content: ""; 
    display: table; 
} 

#menu > ul:after { 
    clear: both; 
} 

#menu > ul { 
    *zoom: 1; 
} 

/* Level one */ 
#menu > ul > li { 
    float:left; 
    position:relative; 
    overflow:visible; 
    width:30%; 
    max-width:190px; 
    list-style-type: none; 
    font-size: 0.5em; 
    z-index: 2; 
} 
#menu > ul > li > a{ 
    padding:.5em 1em; 
    position: relative; 
    z-index: 2; 
} 

/* Level 2*/ 
#menu > ul > li > ul { 
    background:#afeeee; 
    border-radius: 0 5px 5px 5px; 
    position:absolute; 
    z-index: 2; 
    padding:1em; 
    width:200px; /*set to whatever you need*/ 
    display:none; 
} 

/* Segunda lista do level 2*/ 
#menu > ul > li:nth-child(2) > ul{ 
    margin-left:-50%; 
    border-radius: 5px; 
    list-style-type: none; 
    position: absolute; 
    z-index: 2; 
} 

/*Quarta lista do level 2*/ 
#menu > ul > li:nth-child(4) > ul{ 
    margin-left:-50%; 
    border-radius: 5px; 
    list-style-type: none; 
    position: absolute; 
    z-index: 2; 
} 

/* Última lista do level 2*/ 
#menu > ul > li:last-child > ul{ 
    right:0; 
    border-radius: 5px 0 5px 5px; 
    position: absolute; 
    z-index: 2; 
} 

/* Hover level 1*/ 
#menu > ul > li:hover { 
    background: #afeeee; 
    border-radius: 5px 5px 0 0; 
    color:#fff; 
} 

#menu > ul > li:hover > ul { 
    display:block; 
    position: absolute; 
    z-index: 3; 
} 

#menu > ul > li:hover > a, 
#menu > ul > li > ul a{ 
    color:#fff; 
} 

#menu a { 
    text-decoration:none; 
    display:block; 
} 
body { 
    margin: 0; 
    padding: 0; 
    border: 0; 
    overflow: hidden; 
    height: 100%; 
    max-height: 100%; 
    color: black; 
} 
#frame-superior { 
    background-image: url(fundo-superior.jpg); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center center; 
    font-size: 50px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 200px; 
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/ 
    z-index: 2; 
} 
#frame-inferior { 
    /*background-image: url(buteco-inicial.jpg); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: center center;*/ 
    font-size: 50px; 
    position: absolute; 
    top: 200px; /*Colocar o mesmo valor da height do frame-superior*/ 
    left: 0; 
    right: 0; 
    bottom: 0; 
    overflow: hidden; 
    z-index: 0; 
} 
#but-inicial { 
    width: 100%; 
    position: absolute; 
    margin-top: -25%; 
    z-index: 0; 
}

子菜單繼續下去的形象背後（或後面的DIV框架劣）。

來源

2015-05-04 user3753054

有時爲了DOM的問題是，你可以把菜單作爲DOM的最後一個項目，然後用它上面CSS重新定位。 – DrCord

另一件事 - 要使用z-index，您必須在每個項目上設置它以使其可靠地工作。您也不能使用負Z指標。 – DrCord

https://jsfiddle.net/f5yt7rna/6/

#menu > ul > li:hover { 
    background: #afeeee; 
    border-radius: 5px 5px 0 0; 
    color:#fff; 
    z-index:100; 
}

注意，在Z-指數的變化

來源

2015-05-04 23:48:21 PrakashSharma

'z-index'沒有'px'，不能是負數。基本上這轉換爲'z-index：0;'。 – Oriol

對不起，但我看到負面是允許的。 [鏈接]（http://www.w3schools.com/cssref/pr_pos_z-index.asp）。檢查並讓我知道 – PrakashSharma

你是對的。 CSS 2.1規範：http://www.w3.org/TR/CSS2/visuren.html#z-index允許。爲了將來的參考，請勿使用w3school。這就是爲什麼：http://meta.stackoverflow.com/questions/280478/why-not-w3schools-com – Oriol

1日。刪除#frame-superior上的overflow屬性，以便您的菜單不會被切斷。

2nd。除#menu > ul > li:hover > ul以外的任何地方刪除z-index。另外，z-index:0是默認設置，因此不需要再次設置它。

檢查最終解決方案here

來源

2015-05-05 00:11:40 Oriol

這是溢出！謝謝。 – user3753054

NP。請投票並將此答案標記爲答覆。謝謝。 – Oriol

CSS下拉菜單隱藏在div後面（已經嘗試過z-index）

回答

相關問題