将水平下拉菜单居中并保持居中

Question

我创建了一个固定的，100％宽度的导航栏，横跨我的页面顶部;唯一的问题是我不能让下拉菜单标题在页面调整大小时保持居中，或者就此而言，根本就是......它们现在已经浮动了。

以下是full screen result和the code。

到目前为止，我所尝试的所有内容都打破了菜单标题的下拉菜单附件。

感谢您的帮助，
链路

Answer 1

text-align:center上已有ul。这是一个好的开始。现在只需添加：

#menu li {
    display:inline-block;
    float:none; /* or just remove the float */
}

这将使导航项目居中，但也摆脱了这一点：

#menu {
    left: -20px;
}

这打破了布局并使第一个链接无法点击。

您还可以在:hover上应用一些额外的填充，或者使列表项“跳转”的内容。我也建议解决这个问题，这样链接就不会移动了。