Question

我的导航菜单下拉属于我页面内容的问题。现在我已经尝试搞乱z-index但没有运气。

以下是问题的图片：

enter image description here

这是我的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可以解决这个问题，但是nope = /非常感谢你！

Answer 1

将position: relative;添加到#contain

以下是工作代码http://jsfiddle.net/jZP78/

属性z-index仅适用于具有绝对，相对和固定定位的元素。

导航菜单堆叠

1 个答案: