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

Question

我已经建立了一个超级下拉菜单

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

我已经把我的代码副本放在了小提琴上，并会提供任何关于如何绕过这个问题的建议：巨型下拉菜单。

#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;
}

更新：

瑞秋·盖伦版的超级滴

大家好，瑞秋·盖伦向我展示了如何用Z索引解决这个问题。

我唯一的问题是，在瑞秋的版本中，她在下降方面没有差距。我的版本有差距。我想知道瑞秋是怎么做到的-我很明显想复制这个。

第二次更新：

我现在遇到的问题是跌落的空隙。

firstExample

我遵循了@ThomasBaumgartner的建议

是由#menu li声明中7em的固定宽度引起的。如果可能的话，删除"width: 7em“，然后添加”空格: nowrap“。

移除宽度引起的问题

但是这使得蓝色的背景被推到了最左边-它还使主页下拉菜单打破了它的div。

我真的很感激你的任何建议。

Answer 1

在菜单中添加一个z索引属性.

.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));

看哪！