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

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

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

我已将我的代码副本放在小提琴上，并将建议您如何解决此问题：

更新：

大家好，rachel gallen好心地向我展示了如何用Z指数解决这个问题

我唯一的问题是，在rachel的版本中，她在下拉列表中没有空白。我的版本有漏洞。我想知道rachel是怎么做到的-我显然想复制这个

第二次更新：

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

我遵循了@ThomasBaumgartner的建议

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

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

---

如果有任何建议，我将不胜感激。

我添加了

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

瞧
 将z索引属性添加到菜单弹出菜单中

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

你好，瑞秋。非常感谢你这么做。将Z索引添加到div是否合适。我认为z-index只是指图像的堆叠顺序，而不是指你希望事物s出现在页面上的顺序，因此将其应用于divs是非常困难的fine@Paul：z-索引适用于所有定位元素（绝对/相对/固定）顺便说一句：在你的例子中，你需要这样做只是因为在主面板中相对定位的元素Hey Rachel和everyone。我现在明白了。快问大家。当我单击“查找儿童保育”下拉列表时，下拉列表中有一个空白。我不知道这是什么原因造成的对不起。我的意思是在我的下拉列表中。不是蕾切尔。我想弄清楚Rachel是如何阻止ApearinGit向左移动的，因为它有浮动：左。它比以前更向左移动，因为它不再被任何出血菜单项停止。你的小提琴对我不起作用-css不见了。页边空白处：7px是造成空白的原因。删除它并从中工作Hi Thomas我将正确的filddle放在了由于使用删除而导致的问题下。请再次单击该链接；。主面板。介绍注册{背景颜色：#034888；浮动：无；边距：0自动；顶部填充：1px；}以防您希望登录表单水平居中；顶部填充可防止标题边距在方框上移动。如果您不喜欢填充，另一种方法是将标题边距顶部设置为0。
.dropdown_1column, 
.dropdown_2columns, 
.dropdown_3columns, 
.dropdown_4columns, 
.dropdown_5columns {
    ...
    z-index: 1; /* or higher, depending other layers you might use */
    ...
}