html - 每个导航项中的居中对齐下拉菜单

Question

我有一个特定大小的 div，宽 800px，高 50px，里面有一个无序列表，包含 6 个元素，与 div 的中心对齐，所有内容到目前为止工作正常。

然后我想从每个元素创建一个下拉列表。现在，我将第二个 ul 对齐到容器 div 的左侧。

我试图让它与每个元素的中心对齐，并且 ul 元素的宽度不能相同。这是我到目前为止所拥有的:jsFiddle .有什么建议吗？

#bar {
  width: 800px;
  left: 50%;
  transform: translate(-50%);
  -webkit-transform: translate(-50%);
  height: 50px;
  background-color: lime;
  position: absolute;
  top: 20px;
}
.test-navbar ul {
  width: 100%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  background-color: ;
  text-align: center;
  font-family: sans-serif;
}
.test-navbar li {
  display: inline-block;
  width: auto;
  margin: 0;
  padding: 0;
}
.test-navbar a {
  text-align: center;
  padding: 9px;
  margin: 0;
  display: block;
  text-decoration: none;
  color: #313131;
  font-family: 'Oswald', sans-serif;
  margin-top: 0px;
  font-size: 23px;
  background-color: ;
}
.test-navbar a:hover {
  color: #f50057;
}
.test-navbar ul ul {
  display: none;
  position: absolute;
  left: 0%;
  background: #fff;
  margin-left: 0px;
  text-align: center;
  width: 200px;
  line-height: 40px;
  padding: 10px;
}
.test-navbar ul ul li {
  float: none;
  width: 100%;
  background-color: ;
}
.test-navbar ul ul a {
  line-height: 0px;
  padding: 5px 5px;
  width: 100%;
  background-color: ;
}
.test-navbar ul li:hover > ul {
  display: block;
}

<div id="bar">
  <div class="test-navbar">
    <ul>
      <li>
        <a href="#">PASION</a>
        <ul>
          <li><a href="">EXTRA FROM PASION1</a></li>
          <li><a href="">EXTRA FROM PASION2</a></li>
          <li><a href="">EXTRA FROM PASION3</a></li>
          <li><a href="">EXTRA FROM PASION4</a></li>
          <li><a href="">EXTRA FROM PASION5</a></li>
          <li><a href="">EXTRA FROM PASION6</a></li>
        </ul>
      </li>
      <li><a href="#">EXTRA AREA</a></li>
      <li><a href="#">VIDEO</a></li>
      <li>
        <a href="#">ANOTHER LINK</a>
        <ul>
          <li><a href="">EXTRA FROM PASION1</a></li>
          <li><a href="">EXTRA FROM PASION2</a></li>
          <li><a href="">EXTRA FROM PASION3</a></li>
          <li><a href="">EXTRA FROM PASION4</a></li>
          <li><a href="">EXTRA FROM PASION5</a></li>
          <li><a href="">EXTRA FROM PASION6</a></li>
        </ul>
      </li>
      <li><a href="#">LINK5 STYLE</a></li>
      <li><a href="#">BYE</a></li>
    </ul>
  </div>
</div>

Answer 1

您可以使用相对 + 绝对位置和变换技巧。

.test-navbar li {
  position: relative;
}
.test-navbar ul ul {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

jsFiddle