html - CSS 菜单突出显示大小不匹配

Question

在我的主要水平导航中，我有一个名为#main-nav 的容器，其中包含 anchor 标记形式的按钮。 anchor 标记大小与#main-nav 容器不匹配，我不明白为什么。

哦，还有，下拉菜单在菜单基线上的位置比它们应该高几个像素，我不确定这是否相关。

我目前使用与菜单栏相同的高亮颜色和下拉菜单来掩饰问题，但这不是最佳选择。 (代码检查员清楚地显示了问题)

我的网站是http://www.darkmatter-designs.com/

任何帮助将不胜感激，我已经没有想法了。

Answer 1

使用 max-width 和 margin 0 auto将你的 ul 置于导航中心

#main-nav ul {
/* display: inline-block; */
  position: relative;
  max-width: 960px;
  margin: 0 auto;
}

CSS 居中:

如果您只是想让 anchor “居中”:

#main-nav ul {
  position: relative;
  /* display: inline-block; */
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
}

#main-nav ul li {
  /* float: left; */
  display: inline-block;
}

要修复下拉列表，您可以将 padding-top 添加到 #main-nav ul ul

#main-nav ul ul {
  background: #1E344A;
  position: absolute;
  top: 100%;
  z-index: 1;
  padding-top: 3px;/*was added*/
}

并且由于您对 ul ul 使用绝对位置，请确保将 position:relative 添加到父元素，如下所示:

#main-nav ul li {
  float: left;
  position: relative;/*was added*/
}