html - 垂直居中水平导航

Question

作为 HTML/CSS 新手，我正在尝试创建一个带有垂直下拉子菜单的居中水平主菜单。子菜单应该与父级主菜单元素完美对齐。由于缺少声望点，无法附上图片，但可以可视化以防对任何人有帮助。

在我当前的设置中，子菜单项(方向和谷歌地图)完全向左对齐，我无法在主菜单项(位置)下很好地找到它们。我相信解决方案在于元素的绝对/相对定位，但我不知道如何在不破坏总体布局的情况下实现它。

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

最终结果类似于 this example ，不幸的是它的代码给出了 404 错误。

这是我的 HTML:

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

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

对于新手的请求表示歉意，并为所有的帮助干杯!

Answer 1

Parent(#nav li) 必须相对定位。

最初 ul 使用一些 padding 呈现，您应该添加 padding: 0 以获得正确的对齐方式。

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

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