文本后面的下拉菜单

Question

我尝试创建一个下拉菜单。这就是我到目前为止所做的： http://gegensinn.org/test.html （我使下拉菜单始终可见以进行“调试”）

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

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

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

我尝试将整个菜单设置为 z-index:100; 并同时设置 .main 的 z-index:1; >。

之后我尝试仅设置

和 的 z-index 但没有任何效果。

Answer 1

在 #header 上添加 position:relative :)

Answer 2

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

CSS

#menu a
{
  z-index: 100;
}

#menu ul li ul
{
  position: absolute;
}

#main
{
  z-index: 10;
}

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

Answer 3

添加相对于li的位置和sub ul的绝对位置，然后添加z-index

Answer 4

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

position:relative !important;z-index:999