CSS - 子菜单不可见

Question

http://jsfiddle.net/4hLnZ/

有人可以弄清楚为什么我的子菜单没有显示在内容div之上

Answer 1

子菜单未显示的原因是内容在其上，因为它是在以后定义的。

添加这个：

#menu li {
  ...
  z-index: 100;
}

Answer 2

在#menu上定义z-index ，其position:relative 。

像这样：

 #menu{
 padding:0;
 margin:0;
 position:relative;
 z-index:100;
 }

http://jsfiddle.net/4hLnZ/4/

Answer 3

对我来说，完全写出选择器是有帮助的，特别是对于菜单项。

将菜单设置为块项，这样，其行为就像div。 列表项可以是内联块（水平菜单）或块（垂直菜单）。

：hover效果可以通过覆盖来实现。 在li：hover选择器中增加权重（注意，仅CSS3）：

#menu ul li ul { display:none; }
#menu ul li:hover ul { display:block; }

更好的CSS应该是

#menu { height: 30px; }
#menu ul { display: block; position: relative; z-index: 100; }
#menu ul li { float: left; list-style: none; margin: 0; padding:0; }
#menu ul li ul { display:none; }
#menu ul li a { width:100px; height: 30px; display: block; text-decoration:none; text-align: center; line-height: 30px; background-color: black; color: white; }
#menu ul li a:hover { background-color: red; }
#menu ul li:hover ul { position: absolute; top: 30px; display: block; width: 100px; }
#menu ul li:hover ul li { display:block; }

小提琴： http ： //jsfiddle.net/tive/4hLnZ/6/

Answer 4

用这个

#menu ul ul { position: absolute; top: 30px; visibility: hidden; z-index: 1; }

加上z-index: 1; 对于#menu ul ul