在其他Divs後面的大型下拉菜單

Question

我正在構建一個大型下拉菜單，但是當我將鼠標懸停在其上時，其內容出現在其他Div的後面。

我搜索了一種方法來修復它，並且我閱讀了關於使用'position：relative'和'z-index'，但它不適用於我。

這是現在的樣子：

我的HTML文件：

<div id="nav"> 
    <ul id="menu"> 
     <li><a href="#" class="home">Home</a><!-- Begin Home Item --> 
      <div class="dropdown_2columns"><!-- Begin 2 columns container --> 
       <div class="col_2"> 
        <h2>Welcome !</h2> 
       </div> 

       <div class="col_2"> 
        <p>Hi and welcome here ! This is a showcase of the possibilities of this awesome Mega Drop Down Menu.</p>    
        <p>This item comes with a large range of prepared typographic stylings such as headings, lists, etc.</p>    
       </div> 

       <div class="col_2"> 
        <h2>Cross Browser Support</h2> 
       </div> 

       <div class="col_1"> 
        <img src="img/browsers.png" width="125" height="48" alt="" /> 
       </div> 

       <div class="col_1"> 
        <p>This mega menu has been tested in all major browsers.</p> 
       </div> 
      </div><!-- End 2 columns container --> 
     </li><!-- End Home Item --> 
    </ul> 
</div> 

<div id="content"> 
    <h1> Content Test </h1> 
</div> 

CSS文件：

#content { 
    margin:10px auto 0px 429px; 
    position:relative; 
    z-index: 1; 
} 


/* Navigation Bar */ 
#nav { 
    width:100%; 
    /* Background color and gradients */ 
    background: #c92424; 
    background: -moz-linear-gradient(top, #dd4343, #9e1c1c); 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#dd4343), to(#9e1c1c)); 
    margin: 0 0 1em 0; 
    position:relative; 
    z-index: 999; 

} 

#menu { 
    list-style:none; 
    position:relative; 
    width:882px; 
    margin:30px auto 0px 429px; 
    height:43px; 
    padding:0px 20px 0px 20px; 

    /* Background color and gradients */ 

    background: #c92424; 
    background: -moz-linear-gradient(top, #dd4343, #9e1c1c); 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#dd4343), to(#9e1c1c)); 

} 


#menu li { 
    float:left; 

    text-align:center; 
    position:relative; 
    padding: 4px 20px 4px 20px; 
    margin-top:7px; 
    border:none; 
} 

#menu li:hover { 

    height:21px; 

    margin-top:1px; 
    padding: 11px 20px 11px 20px; 
    /* Background color and gradients */ 
    background: white; 
    /* background: -moz-linear-gradient(top, #e56e6e, #e56e6e); 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e56e6e), to(#e56e6e)); */ 


} 

#menu li a { 
    font-family:Arial, Verdana, sans-serif; 
    font-weight: bold; 
    font-size:14px; 

    line-height:21px; 
    color: #EEEEEE; 
    display:block; 
    outline:0; 
    text-decoration:none; 
    text-shadow: 1px 1px 1px #000; 
} 

#menu li:hover a { 
    color:#c92424; 
    text-shadow: 1px 1px 1px #FFFFFF; 

} 


/* Drop Down */ 

.dropdown_2columns, 
.dropdown_4columns { 
    margin:10px auto; 
    float:left; 
    position:absolute; 
    left:-999em; /* Hides the drop down */ 
    text-align:left; 
    padding:10px 5px 10px 5px; 
    border:1px solid #c92424; 
    border-top:none; 

    /* Gradient background 
    background:#F4F4F4; 
    background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB); 
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB)); 

    /* Rounded Corners */ 
    -moz-border-radius: 0px 5px 5px 5px; 
    -webkit-border-radius: 0px 5px 5px 5px; 
    border-radius: 0px 5px 5px 5px; 
} 

.dropdown_2columns {width: 280px;} 
.dropdown_4columns {width: 560px;} 


#menu li:hover .dropdown_2columns, 
#menu li:hover .dropdown_4columns{ 
    left:-1px; 
    top:auto; 
} 

/* Columns */ 

.col_1, 
.col_2, 
.col_4{ 
    display:inline; 
    float: left; 
    position: relative; 
    margin-left: 5px; 
    margin-right: 5px; 
} 
.col_1 {width:130px;} 
.col_2 {width:270px;} 
.col_4 {width:550px;} 

/* Drop Down Content Stylings */ 

#menu p, #menu h2, #menu h3, #menu ul li { 
    font-family:Arial, Verdana, sans-serif; 
    font-weight: bold; 
    line-height:21px; 
    font-size:12px; 
    text-align:left; 
    text-shadow: 1px 1px 1px #FFFFFF; 
} 
#menu h2 { 
    font-size:21px; 
    font-weight:400; 
    letter-spacing:-1px; 
    margin:7px 0 14px 0; 
    padding-bottom:14px; 
    border-bottom:1px solid #666666; 
} 
#menu h3 { 
    font-size:14px; 
    color:#c92424; 
    margin:7px 0 14px 0; 
    padding-bottom:7px; 
    border-bottom:1px solid #888888; 
} 
#menu p { 
    line-height:18px; 
    margin:0 0 10px 0; 
} 

#menu li:hover div a { 
    font-size:12px; 
    color:black; 
} 
#menu li:hover div a:hover { 
    color:#c92424; 
} 

#menu li ul { 
    list-style:none; 
    padding:0; 
    margin:0 0 12px 0; 
} 
#menu li ul li { 
    font-size:12px; 
    line-height:24px; 
    position:relative; 
    text-shadow: 1px 1px 1px #ffffff; 
    padding:0; 
    margin:0; 
    float:none; 
    text-align:left; 
    width:130px; 
} 
#menu li ul li:hover { 
    background:none; 
    border:none; 
    padding:0; 
    margin:0; 
} 

Answer 1

你的菜單背景是透明的。加這個：

.dropdown_2columns{ background: white; }