html - 在全宽 css 菜单下拉菜单中获取下拉菜单链接以与其父元素对齐

Question

我有一个使用全宽下拉子菜单(关于下拉菜单)的导航，但我正在努力将子菜单中的链接居中对齐在其父级下方。我还需要它具有响应性，以便无论 View 宽度如何，子链接都保持居中。

谁能告诉我哪里出错了，或者我需要做什么才能达到这种效果？

在此先感谢您的帮助。

.navigation--main li:hover>ul {
  display: flex;
  justify-content: center;
}

ul.navigation--main li ul {
  background: #000;
  color: #fff;
  display: none;
  position: absolute;
  top: 114px;
  left: 0;
  width: 100%;
}

ul.navigation--main li ul li {
  padding: 1.5em 0.5em;
}

<div class="navigation--container">
  <div class="logo">
    <a href="#"><img src="assets/img/Group 85.svg" alt="ORRAA Logo" class="homeLogo" height="78.93" width="260" /></a>
  </div>
  <div class="navigation">
    <ul class="navigation--main">
      <li><a href="index.php">Home</a></li>
      <li><a href="about.php">About</a>
        <ul>
          <li>
            <a href=""></a>Ocean risk</li>
          <li>
            <a href=""></a>About ORRAA</li>
        </ul>
      </li>
      <li><a href="#">Membership</a></li>
      <li><a href="#">Governance</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
    <ul class="navigation--social-icons">
      <li>
        <a href="#"><img src="assets/img/facebook.svg" alt="facebook"></a>
      </li>
      <li>
        <a href="#"><img src="assets/img/instagram.svg" alt="instagram"></a>
      </li>
      <li>
        <a href="#"><img src="assets/img/Path 22.svg" alt="twitter"></a>
      </li>
    </ul>
  </div>
</div>

Answer 1

您可以在 css 文件中更改..希望此解决方案对您有所帮助。

.navigation--main li:hover>ul {
  display:flex;
  justify-content:center;
  width: calc(100vw - 112px);
}
.navigation--main li:hover>ul li{
  margin-left:20px;
}

ul.navigation--main li ul {
  background: $brand-sky-blue;
  display: none;
  width: 100%;
}

ul.navigation--main li ul li {
  padding:10px;
}

这是供引用的例子:codepen.io/arpita1030/pen/pMLQME