Html 使我的下拉菜单位于页面中央

我在JS fiddle上制作了这个小下拉菜单，但我真的需要将它集中在页面上，如果有人能帮我这么做，我将不胜感激

另外，如果有人不介意，请你帮我这样做，当浏览器压缩到500px以下时，它会变成一个下拉列表，就像这个wiki页面上的图片一样 我试过这么做，但我真的很挣扎，我相信

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

如果你能让我的菜单栏居中，那就太好了，但是如果你能帮我做这个下拉列表

非常感谢大家

试试这个

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

---

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

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

要生成下拉列表，请在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;
}

---

试试这个css

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

---

您好，非常感谢您的解决方案：D，使用下拉菜单，我非常希望它尽可能简单，以便我能理解，正如您在这个链接上看到的，有一个图像或一个非常基本的下拉列表，这就是我想要的，谢谢您的帮助

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

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