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的默认值，因此您无需定义它。你只需要使用相对/绝对。检查这个fiddle。你可以减少这个小提琴中的更多定位，以便在另一个ul上显示，当在第二个菜单项上悬停时显示。

检查小提琴并使用以下代码。

#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

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

#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/

Answer 4

您可以使用不同的方法

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

#nav {
    position: absolute;
    left:50%;
    margin-left:-160px; /* This is the width of your menu / 2       */
    font: bold 12px SimHei, Arial, Helvetica, Sans-serif;
    border: 1px solid #121314;
    overflow: hidden;
}

看看： http://jsfiddle.net/DEK8q/8/

Answer 5

以下是您的解决方案：http://jsfiddle.net/DEK8q/36/

使用的一些重要的CSS样式是：

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

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

#nav ul{
    list-style:none;
}

#nav > ul{
    margin:0px;
    padding:0px;
}

#nav li{
    float:left;
    position:relative;
}

#nav li ul{
    display:none;
    position:absolute;
    left:0px;
    top:30px;
    padding:0px;
    margin:0px;
}

#nav li li ul{
    left:100%;
    top:0px;
}


#nav li:hover > ul{
    display:block;
}

css下拉菜单第二级消失

5 个答案: