html - css 下拉菜单二级消失

Question

我正在制作一个纯 CSS 下拉菜单。
这是一个例子。
http://jsfiddle.net/DEK8q/8/
现在我想让这个菜单居中。所以我像这样添加相对位置:

#nav-container {
    position: relative;
    float: left;
    left: 50%;
}

#nav {
    ***position: relative;***
    float: left;
    left: -50%;
    font: bold 12px SimHei, Arial, Helvetica, Sans-serif;
    border: 1px solid #121314;
    overflow: hidden;
}

我发现如果相对于nav定位，二级菜单无法显示!
因为相对定位的div有显示绑定(bind)。
我只想让它成为 css 并居中对齐。我该如何解决这个问题？

Answer 1

我认为您在这里使用了很多定位。那不是必需的， position:static;是位置的默认值，所以你不需要定义它。你只需要使用相对/绝对。检查这个fiddle .您也可以为另一个 ul 减少此 fiddle 中的更多定位，当鼠标悬停在第二个菜单项上时显示。

检查 fiddle 并使用下面的代码。

#nav-container {
  float: left;
  width:100%; 
}
#nav {
float: left;
margin-left:25%;
font: bold 12px SimHei, Arial, Helvetica, Sans-serif;
border: 1px solid #121314;
overflow: hidden;
}