html - 防止动态子导航从其父导航项下方开始

Question

我正在构建一个渐进式网络应用程序，它通过 API 将数据输出到页面上。例如，可能有一个名为关于我们的页面，而在关于我们中可能有历史、位置等……作为其子导航。以下是关于我的意思的几个例子:

在健康与福祉页面上 在“关于我们”页面上 我遇到的问题是因为关于我们的链接包含在关于我们的 LI 元素中包含的 UL 元素中，它将子导航定位为直接在其下方开始，而不是在 Logo 所在的位置下方。

以下是填充导航的 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;，它产生了以下示例:

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

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

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

Answer 1

我想通了。我必须使父 UL 元素的位置相对，并使二级 UL 元素的位置绝对。然后我调整了 margin-left 值，直到它们都从 Logo 下方开始，而不是它们的父元素。