html - 带下拉菜单的居中导航栏

Question

我在使用下拉菜单将导航栏居中时遇到问题。我想居中栏和它下面的下拉菜单。我尝试使用常规的无序列表，现在使用一个表格来使下拉部分居中。我已经看到代码工作的示例，但是当我将它实现到我的导航栏中时，它不适用于下拉菜单。我想让导航栏成为一个可变宽度，而不是一个固定宽度，因为我可以获得一个固定宽度来完成某种工作。有什么帮助吗？HTML:

@charset "utf-8";

/* CSS Document */

#navbar {
  position: relative;
  top: 100px;
  left: 150px;
  margin: 0;
  padding: 0;
  width: 800px;
  margin: 0 auto;
}
#navbar li {
  list-style: none;
  float: left;
}
#navbar li a {
  display: block;
  padding: 3px 8px;
  text-transform: uppercase;
  text-decoration: none;
  color: #999;
  font-weight: bold;
}
#navbar li a:hover {
  color: #000;
}
#navbar li ul {
  display: none;
}
#navbar li:hover ul,
#navbar li.hover ul {
  position: absolute;
  display: inline;
  left: 15px;
  width: 300px;
  margin: 0;
  padding: 0;
  text-align: center;
}
#navbar li:hover li,
#navbar li.hover li {
  float: center;
}
#navbar li:hover li a,
#navbar li.hover li a {
  color: #999;
}
#navbar li li a:hover {
  color: #000;
}

<ul id="navbar">
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">Services</a>
    <ul>
      <table width="275" border="5" align="center">
        <tr>
          <td align="left"><a href="#">Spraying</a>
          </td>
          <td align="right"><a href="#">Combining</a>
          </td>
        </tr>
        <tr>
          <td align="left"><a href="#">Planting</a>
          </td>
          <td align="right"><a href="#">Drilling</a>
          </td>
        </tr>
        <tr>
          <td align="left"><a href="#">Strip Tillage</a>
          </td>
          <td align="right"><a href="#">Tillage</a>
          </td>
        </tr>
      </table>
    </ul>
    <li><a href="#">Packages</a>
    </li>
    <li><a href="#">About Us</a>
    </li>
    <li><a href="#">Contact Us</a>
    </li>
  </li>
</ul>

Answer 1

I want to center the bar, and the dropdown underneath it.

然后，您必须删除 #navbar 上的 left 属性。否则，它很好。

您将下拉列表 ul 放在 absolute 位置，100% 宽度。

I am wanting to have the nav bar be a fluid width, not a set width, as I can get a set width to kind of work.

此外，它是:hover 状态。 .hover 表示“悬停”类。

See this working example