大型下拉菜单与背景图片冲突

Question

我已经建立了一个大型下拉菜单

问题是它与主页上的背景图像和 div 冲突

我已将我的代码副本放在小提琴上，并会就如何解决这个问题提出任何建议：mega Drop down menu

#menu {
    list-style:none;
    width:1100px;
    margin:30px auto 0px auto;
    height:43px;
    padding:0px 20px 0px 20px;

    background: #014464;
    background: -moz-linear-gradient(top, #0272a7, #013953);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));


}

#menu li {
    float:left;
    display:block;
    text-align:center;
    position:relative;
    padding: 4px 10px 4px 10px;
    margin-right:30px;
    margin-top:7px;
    border:none;
    width: 7em;
}

.home-panel {
    color: #686767;
    padding: 0;
    margin: 0;
    font-family: "open-sans", "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1;
    position: relative;
    cursor: default;
}

.home-panel {
    background: rgba(0, 0, 0, 0) url("wallpaper.jpg") no-repeat scroll center center / cover;
    position: relative;
}

更新：

rachel gallen VERSION of mega drop

大家好，rachel Gallen 向我展示了如何使用 Z-index 解决问题。

我唯一的问题是，在瑞秋的版本中，她在下拉菜单中没有间隙。我的版本有差距。我想知道瑞秋是怎么做到的——我显然希望复制这一点。

第二次更新：

我现在遇到的问题是下拉菜单中的空白。

firstExample

我听从了@ThomasBaumgartner 的建议

是由您的#menu li 声明中的固定宽度 7em 引起的。如果 可能删除“宽度：7em”并添加“空白：nowrap”

problems caused by removing width

但这导致蓝色背景推到最左边——它也使主页下拉菜单脱离了它的 div

我非常感谢任何建议。

Answer 1

将 z-index 属性添加到您的菜单飞出。

.dropdown_1column, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns, 
.dropdown_5columns {
    ...
    z-index: 1; /* or higher, depending other layers you might use */
    ...
}

Answer 2

我在以下代码中添加了z-index:50;：

.dropdown_1column, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns,
.dropdown_5columns {
    margin:4px auto;
    position:absolute;
    left:-999em; /* Hides the drop down */
    text-align:left;
    padding:10px 5px 10px 5px;
    border:1px solid #777777;
    border-top:none;
    z-index:50; 
    /* Gradient background */
    background:#F4F4F4;
    background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));

瞧！