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解决问题。

我唯一的问题是，在rachel的版本中，她在下拉中没有差距。我的版本有差距。我想知道rachel是怎么做到的 - 我显然希望复制这个。

第二次更新：

我现在遇到的问题是下拉中的差距。

firstExample

我遵循了@ThomasBaumgartner的建议

是由#menu li声明中固定的7em宽度引起的。如果可能删除＆＃34;宽度：7em＆＃34;并添加＆＃34; white-space：nowrap＆＃34;代替

problems caused by removing width

但是这导致蓝色背景向最左边推 - 它也使主页下拉菜单突破了它的div

我真的很感激任何建议。

Answer 1

我将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));

瞧瞧！

Answer 2

将z-index属性添加到菜单中。

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

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

2 个答案: