阻止动态子导航从其父导航项

Question

我正在建立一个渐进式网络应用，通过API将数据输出到网页上。例如，可能有一个页面被称为关于我们，在我们左右可能有其子导航的历史，位置等。以下是我的意思：

什么时候健康＆amp;健康页面 在关于我们的页面时 我遇到的问题是因为about us链接包含在about us LI元素中包含的UL元素中，它将子nav定位在它的正下方而不是徽标所在的下方。

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

<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;，这产生了以下示例：

什么时候健康＆amp;健康页面 在关于我们的页面时 在健康和健康方面看起来更好幸福的页面，但后来我看到margin-left:-346px;没有真正解决问题，因为它只向左移动了一定数量的像素。

所以我的问题是，我如何让动态子导航从徽标下方开始，而不是从其父导航项目下面开始，所以它看起来像第三张图像？

更新：这是我所指的https://jsfiddle.net/hkctdpqn/1/

的另一个例子

Answer 1

我明白了。我必须使父UL元素的位置相对，并使二级UL元素的位置绝对。然后我调整了margin-left值，直到它们全部从徽标下面开始，而不是它们的父元素。