【发布时间】：2015-05-04 23:40:41
【问题描述】：
我正在尝试在 div 上放置一个 CSS 子菜单，并且我已经尝试过使用 z-index，但它仍然无法正常工作。这是 HTML 代码：
<!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ções anteriores</a>
<ul>
<li><a href="#">Edição 1</a><li>
<li><a href="#">Edição 2</a><li>
<li><a href="#">Ediçã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 框架后面）。
【问题讨论】：
-
有时 DOM 顺序是个问题，您可以将菜单放在 DOM 中的最后一项，然后在其上方使用 CSS 重新定位它。
-
另一件事 - 要使用 z-index，您必须在每个项目上设置它以使其可靠地工作。您也不能使用负 z-index。