CSS 菜单高亮大小不匹配

【问题标题】：CSS menu highlight size mismatchCSS 菜单高亮大小不匹配
【发布时间】：2014-05-10 19:21:43
【问题描述】：

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

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

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

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

任何帮助将不胜感激，我的想法已经用完了。

【问题讨论】：

请在此处分享相关代码并在jsfiddle.net设置小提琴

标签： html css

【解决方案1】：

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

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

CSS 居中：

如果您只想让锚点“居中”：

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

【讨论】：