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;
}

我发现如果我定位相对导航，第二级菜单就不能显示了！

这是因为有一个用于相对定位的div的显示边界。

我想让它只有css和对齐中心。我该如何解决这个问题？

Answer 1

我认为你在这里使用了很多定位。这不是必需的，position:static；是position的默认值，所以您不需要定义它。您只需使用相对/绝对。检查此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;
}

Answer 2

我刚刚找到了解决方案，使用静态位置和边距- left而不是left。

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

http://jsfiddle.net/LrmUS/1/

Answer 3

你也可以试试这个

#nav {
    border: 1px solid #121314;
    font: bold 12px SimHei,Arial,Helvetica,Sans-serif;
    margin: 0 auto;
    overflow: hidden;
    width: 500px;
}

http://jsfiddle.net/DEK8q/29/