我的导航菜单的下拉菜单在我的页面内容下出现问题。现在我尝试弄乱 z-index 但没有运气。
这是问题的图片：
这是我的CSS
@charset "utf-8";
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background-color: #FFF;
margin: 0;
padding: 0;
color: #000;
}
/*--Navigation bar--*/
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #181f32;
background: linear-gradient(top, #344268 0%, #181f32 100%);
background: -moz-linear-gradient(top, #344268 0%, #181f32 100%);
background: -webkit-linear-gradient(top, #344268 0%, #181f32 100%);
box-shadow: 0px 0px 10px #000;
padding: 0 10px;
border-radius: 5px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #344268;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 15px 20px;
color: #fff; text-decoration: none;
}
nav ul ul {
background: #181f32; border-radius: 0px; padding: 0;
position: absolute; top: 100%; z-index:-1;
}
nav ul ul li {
float: none;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
position: relative;
z-index:-1;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
z-index:-1;
}
nav ul ul li a:hover {
background: #344268;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
/*--container--*/
#container {
left:50%;
margin-left:-460px;
width:900px;
height:auto;
margin-bottom: 40px;
position: absolute;
}
/*--Header--*/
#header {
position:relative;
width: 900px;
height: 200px;
margin-bottom: 40px;
}
/*--Content--*/
#wrap {
width: 900px;
height:auto;
position:relative;
}
#contain {
width: 100%;
height:auto;
float:left;
margin-bottom:20px;
z-index:-8;
}
#right {
width: 220px;
background: rgba(24, 31, 50, .8);
background: rgb(24, 31, 50);
float:right;
margin-left:5px;
border-top-right-radius: 5px;
height:200px;
box-shadow: 0 0 8px #000;
}
#center {
width: 450px;
background: rgba(24, 31, 50, .8);
background: rgb(24, 31, 50);
height:800px;
left:50%;
float:right;
box-shadow: 0 0 8px #000;
}
#left{
width: 220px;
border-top-left-radius: 5px;
background: rgba(24, 31, 50, .8);
background: rgb(24, 31, 50);
height: 300px;
float: left;
box-shadow: 0 0 8px #000;
}
以及我的html：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<img name="nojoke" src="" width="400" height="180" alt="nojoke logo" style="background-color: #666666" />
</div>
<div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">Web Design</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Articles</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">User Experience</a></li>
</ul>
</li>
<li><a href="#">Inspiration</a></li>
</ul>
</nav>
</div>
<div id="wrap">
<div id="contain">
<div id="right">
</div>
<div id="center">
</div>
<div id="left">
</div>
</div>
</div>
</div>
</body>
</html>
任何帮助都会很棒！我曾尝试寻找问题，但没有这样的运气。我认为 z-index 可以解决问题，但不行 =/ 非常感谢！