Question

我遇到问题，我的导航栏中心有一个下拉菜单。我想让酒吧居中，下面是下拉菜单。我试图使用常规的无序列表，现在是一个以下拉列表为中心的表。我已经看到了代码工作的示例，但是当我将其实现到导航栏时，它不适用于下拉列表。我想让导航栏成为一个流畅的宽度，而不是一个设定的宽度，因为我可以得到一个设定宽度的工作。有帮助吗？ HTML：

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

我想把酒吧和它下面的下拉中心对齐。

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

您将下拉列表ul放在absolute位置，并带有100% width。

我想让导航栏成为流畅的宽度，而不是设定的宽度我可以获得一定的工作宽度。

此外，它是:hover州。 .hover表示班级＆＃34;悬停＆＃34;。

See this working example

使用下拉列表中心导航栏

1 个答案: