Question

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

Answer 1

子菜单未显示的原因是内容已超过它，因为它是稍后定义的。

添加：

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

Answer 2

使用z-index在#menu上定义position:relative。

像这样：

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

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

Answer 3

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

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

：悬停效果可以通过覆盖来实现。在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; }

为#menu ul ul

添加z-index: 1;

CSS - 子菜单不可见

4 个答案:

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