0

我正在制作一个仅 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 并对齐中心。我怎么解决这个问题？

4

5 回答 5

1

我认为您在这里使用了很多定位。这不是必需的，并且 position:static; 是位置的默认值，所以你不需要定义它。你只需要使用相对/绝对。检查这个小提琴。对于另一个 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;
}
于 2013-03-13T09:31:52.727 回答
0

我刚刚找到了解决方案，使用 position static 和 margin-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/

于 2013-03-13T08:45:21.047 回答
0

这是为您提供的解决方案：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;
}
于 2013-03-13T09:46:14.510 回答
0

这个也可以试试

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

于 2013-03-13T08:48:45.573 回答
0

您可以使用不同的方法

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

于 2013-03-13T08:50:16.970 回答