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

Question

我建立了一个巨大的下拉菜单

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

我已将我的代码副本放在 fiddle 上，并会就如何解决此问题提供任何建议: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 解决问题。

我唯一的问题是，在 rachel 的版本中，她在下拉列表中没有间隙。我的版本有差距。我想知道雷切尔是怎么做到的——我显然想复制这个。

第二次更新:

我现在遇到的问题是下拉列表中的空白。

firstExample

我听从了@ThomasBaumgartner 的建议

is caused by the fixed width of 7em in your #menu li declaration. if possible remove "width: 7em" and add "white-space: nowrap" instead

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 */
    ...
}