防止动态子导航从其父导航项下启动

Question

我正在构建一个进步的web应用程序，它通过API将数据输出到页面上。例如，可以有一个关于我们的页面，关于我们可以有历史，地点，等等。因为它的副导航。这里有几个例子说明我的意思：

在“健康与幸福”页面上

在“关于我们”的页面上

我遇到的问题是因为关于我们的链接包含在一个UL元素中，这个元素包含在关于我们的LI元素中，它将子导航定位到它下面，而不是在徽标的下方。

下面是填充导航的HTML代码的结构，它是基于访问about us页面时的。

<ul>
  <li id="nav-1">
    <a href="/">Home</a>
  </li>
  <li id="nav-2" class="open-two">
    <a href="/health-wellbeing">Health &amp; Wellbeing</a>
  </li>
  <li id="nav-13" class="open-two">
    <a href="/about-us">About Us<span><i class="arrow down"></i></span></a>
    <ul class="level-two" style="display: grid;">
      <li><a href="/about-us" class="current">About Us Home</a></li>
      <li id="nav-8">
        <a href="/history">History</a>
      </li>
    </ul>
  </li>
</ul>

现在，我确实尝试在第二级UL元素上使用margin-left:-346px;，它产生了以下示例：

在“健康与幸福”页面上

在“关于我们”的页面上

在“健康与健康”页面上看上去更好看，但在看到“关于美国”的页面后，我意识到margin-left:-346px;并没有真正解决这个问题，因为它只向左移动了一定数量的像素。

所以我的问题是，如何使动态子导航从徽标下面开始，而不是从其父导航项开始，这样它就像第三个图像？

更新:以下是我所指的https://jsfiddle.net/hkctdpqn/1/的另一个例子

Answer 1

我想通了。我必须使父UL元素的位置相对，并使级别-2 UL元素的位置为绝对。然后，我调整了页边距-左的值，直到他们都开始在徽标下，而不是他们的父元素。