導航菜單堆疊

我的導航菜單的下拉屬於我的頁面內容，存在問題。現在我試圖搞亂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會解決這個問題，但不是= /非常感謝！

來源

2013-04-14 tec4

添加position: relative;到#contain

這裏是工作的代碼http://jsfiddle.net/jZP78/

物業z-index只適用於絕對，相對固定的定位元件。

來源

2013-04-14 02:01:37

謝謝！這解決了問題。不能相信我錯過了！大聲笑 – tec4

導航菜單堆疊

回答

相關問題