辅助功能-键盘选项卡跳过锚点

Question

这个问题真的使我感到困惑，因为我有一个非常基本的菜单结构。从页面源复制并粘贴：

   <header>
      <nav class="top-nav flex-content">
        <ul id="main-nav">
          <li>
            <a href="###">link one</a>
          </li>
          <li>
            <a href="###">link two</a>
          </li>
          <li>
            <a href="###">link three</a>
          </li>
          <li>
            <a href="###">link four</a>
          </li>
          <li>
            <a href="###">link five</a>
          </li>
        </ul>
      </nav>
    </header>

当我从地址栏中选择标签时，它会链接到一个链接，但是在下一个标签中，它会跳到标题之外。其他人有没有经历过？我认为没有理由为什么它不会一直移到列表中的下一个锚点。

我尝试将工作链接放在锚点中，但仍然存在相同的问题。我尝试将递增的tabindexindex放在标签上，但仍然存在相同的问题。似乎没有任何办法让它在导航中循环。

任何相关的CSS都在这里：

.top-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}
.top-nav ul li {
  display: inline-block;
  height: 100%;
  padding: 0;
  color: white;
  line-height: 78px;
}
.top-nav ul li a {
  padding: 25px;
  transition: color 150ms;
}