文本背后的下拉菜单

Question

我尝试创建一个下拉菜单。这就是我到目前为止所做的： http://gegensinn.org/test.html （我随时都可以看到下拉菜单中的“调试”）

我认为问题非常明显：菜单在文本后面。

首先我认为我可以用z-index解决这个问题。

虽然我不太确定哪个元素必须获取z-index属性。

我尝试将整个菜单设置为z-index:100;，同时设置z-index:1;的{​​{1}}。

之后我尝试只设置.main和<li>的z-index，但没有任何效果。

Answer 1

在position:relative上添加#header：）

Answer 2

我认为像这样应用z-index应该可行。

CSS

#menu a
{
  z-index: 100;
}

#menu ul li ul
{
  position: absolute;
}

#main
{
  z-index: 10;
}

如果没有在相关元素上设置z-index，某些浏览器会忽略它。

Answer 3

相对于 li 添加位置，并将绝对位置设为 sub ul ，然后 z-index

Answer 4

对于遇到此问题的其他人，只需将!important和z-index添加到菜单/标题区：

position:relative !important;z-index:999