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）

回答

相关问题