css - 大型下拉导航菜单不覆盖具有相对位置的 div

Question

我发现这个使用 CSS3 的大型下拉菜单。这工作得很好，但我有任何问题。我把这个菜单放在后面DIV。position:relative现在，当我hover LI菜单（主页）时，下拉菜单不覆盖我的 div。如何解决这个问题？演示

Answer 1

给你：http: //jsfiddle.net/b6r9Q/1/

只需输入 z-index: 1; 在下拉列中。

Answer 2

只需增加下拉列的 z-index 即可。见这里http://jsfiddle.net/b6r9Q/3/

.dropdown_1column, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns,
.dropdown_5columns {
    z-index:500;
    margin:4px auto;
    float:left;
    position:absolute;
    left:-999em; /* Hides the drop down */
    text-align:left;
    padding:10px 5px 10px 5px;
    border:1px solid #777777;
    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;
}