垂直居中的水平导航

Question

作为HTML / CSS新手，我正在尝试使用垂直下拉子菜单创建一个居中的水平主菜单。 子菜单应该与父主菜单元素完美对齐。 由于缺乏信誉点而无法附加图片，但如果可以帮助任何人，则可以进行显示。

在我目前的设置中，子菜单项（路线和Google地图）完全对齐到左侧，我无法在主菜单项（位置）下很好地获取它们。我相信解决方案在于元素的绝对/相对定位，但我无法弄清楚如何在不破坏总体布局的情况下实现它。

最后，子菜单框应该都具有相同的宽度，而主菜单项可以根据它们的正常长度而变化。

最终结果与this example类似，不幸的是，它的代码会产生404错误。

这是我的HTML：

＆＃13;

＆＃13;

#nav {
  color: orange;
  list-style: none;
  font-weight: bold;
  text-align: center;
  border: 1px solid orange;
  border-width: 1px 0;
}
#nav li {
  display: inline;
}
#nav a {
  display: inline-block;
  padding: 1ex;
  text-decoration: none;
  color: orange;
}
#nav a:hover {
  text-decoration: none;
  color: white;
  background-color: orange;
}
#nav li ul {
  display: none;
  list-style: none;
  position: absolute;
}
#nav li ul li {
  display: block;
  border-bottom: 1px solid orange;
  border-width: 1px 0;
  text-align: left;
}
#nav li:hover ul {
  display: block;
}

＆＃13;

<ul id="nav">
  <li><a href="index.html">Home</a>
  </li>
  <li>
    <a href="location.html">Location</a>
    <ul>
      <li><a href="location.html#directions">Directions</a>
      </li>
      <li><a href="location.html#maps">Google Maps</a>
      </li>
    </ul>
  </li>
  <li><a href="pictures.html">Pictures</a>
  </li>
  <li><a href="pricesandavailability.html">Prices &amp; Availability</a>
  </li>
  <li><a href="generalinfo.html">General Info</a>
  </li>
  <li><a href="reservationsandcontact.html">Reservations &amp; Contact</a>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;

为新手请求道歉欢呼所有人帮忙！

Answer 1

父母（#nav li）必须定位relative。

最初ul使用padding进行渲染，您应该添加padding: 0以获得正确的对齐。

＆＃13;

＆＃13;

#nav {
  color: orange;
  list-style: none;
  font-weight: bold;
  text-align: center;
  border: 1px solid orange;
  border-width: 1px 0;
  padding: 0;
}
#nav li {
  display: inline;
  position: relative;
}
#nav a {
  display: inline-block;
  padding: 1ex;
  text-decoration: none;
  color: orange;
}
#nav a:hover {
  text-decoration: none;
  color: white;
  background-color: orange;
}
#nav li ul {
  display: none;
  list-style: none;
  position: absolute;
  padding: 0;
  left: 0;
}
#nav li ul li {
  display: block;
  border-bottom: 1px solid orange;
  border-width: 1px 0;
  text-align: left;
}
#nav li:hover ul {
  display: block;
}

＆＃13;

<ul id="nav">
  <li><a href="index.html">Home</a>
  </li>
  <li>
    <a href="location.html">Location</a>
    <ul>
      <li><a href="location.html#directions">Directions</a>
      </li>
      <li><a href="location.html#maps">Google Maps</a>
      </li>
    </ul>
  </li>
  <li><a href="pictures.html">Pictures</a>
  </li>
  <li><a href="pricesandavailability.html">Prices &amp; Availability</a>
  </li>
  <li><a href="generalinfo.html">General Info</a>
  </li>
  <li><a href="reservationsandcontact.html">Reservations &amp; Contact</a>
  </li>
</ul>

＆＃13;

＆＃13;

＆＃13;