将我的下拉菜单放在页面的中央

Question

我在JS小提琴http://jsfiddle.net/WeEzy/上做了这个小小的下拉菜单，但我真的需要把它放在页面的中心位置，如果有人能帮我这样做，我将不胜感激，

此外，如果有人不介意的话请你帮助我这样做，当浏览器压缩到500px以下时，它会变成一个下拉列表，就像这个维基页面上的图片http://en.wikipedia.org/wiki/Drop-down_list 我试图这样做，但我真的很挣扎，我相信它，

@media screen and (max-width:500px) {}.

如果你能让我的菜单栏居中，那就太棒了但是如果可以的话请帮助我做下拉菜单，

非常感谢你

Answer 1

通过将菜单居中，将以下内容添加到您的css（DEMO）：

.top-nav{
    width:100%;
}
.top-nav > ul{
    width:450px;
    margin:0 auto;
}

或者，如果您不想为菜单指定固定宽度（例如，如果可以添加更多项目）（ DEMO ）：

.top-nav > ul {
    text-align:center;
}
.top-nav > ul >li {
    display:inline-block;
    float:none;
}
.top-nav > ul ul {
    text-align:left;
}
.top-nav ul ul {
    padding: 0;
    position: absolute;
}

要生成下拉列表，请在CSS下方添加以下内容：

@media screen and (max-width:500px) {
    .top-nav ul ul {
        position: relative;
    }
    .top-nav li {
        float:none;
    }
    .top-nav li ul{
         display:block;   
    }
    .buttons{
        padding:0;
}

Fiddle with alignment and dropdown

Answer 2

试试这个

.top-nav > ul{text-align:center;}
.top-nav > ul >li {float:none; display:inline-block;}

Answer 3

试试这个css

.top-nav{text-align:center;}
.buttons{display:inline-block;}

<强> Demo