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

的问题是，它与背景图像和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; 
}

UPDATE：

rachel gallen VERSION of mega drop

嗨大家好，rachel gallen已经好心地向我展示了如何用Z-index解决问题。

唯一的问题是，我在拉切尔的版本中，她没有在下拉的差距。我的版本有差距。我想知道rachel是如何做到的 - 我显然希望重现这一点。

月2日更新：

，我现在遇到的是在下拉间隙的问题。

firstExample

我也跟着的@ThomasBaumgartner

的建议是由7em在你#menu李声明固定的宽度所致。如果可能删除“宽：7em”，并增加“白色空间：NOWRAP”，而不是

problems caused by removing width

，但是这引起了蓝色背景推到最左侧这也让主页下拉菜单打破它的分区

我真的很感激任何意见。

来源

2015-09-12 Paul Kendal

它向左移动，因为它有float：left。它比以前更进一步向左移动，因为它不会因出血菜单项而停止。你的小提琴不适合我--css缺失。 –

margin-top：7px正在造成差距。删除它，并从那里工作 –

您好托马斯我把正确的filddle在Probles下删除with.please引起的再次点击该链接; https：//jsfiddle.net/TheSearcher/v18zhj41/ –

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

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

来源

2015-09-12 10:09:48

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

的Et瞧！

来源

2015-09-12 10:07:13

https://jsfiddle.net/RachGal/tfwL5erL/2/ –

hello Rachel。非常感谢你做的这些。将Z-index添加到div是否合适？我认为z-index只涉及图像的堆叠顺序 –

不，它指的是您希望事物出现在页面上的顺序，因此将它应用于div很好 –

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

回答

相关问题