Question

我正在尝试使用嵌套无列表导航实现子菜单，如下面的代码所示。

<nav id="main-nav">
  <a href="#">A1</a>
  <a href="#">A2
    <nav id="sub-nav">
      <a href="#">A2.1</a>
    </nav>
  </a>
  <a href="#">A3</a>
</nav>

但是，问题是“sub-nav”离开了锚标记而成为它的兄弟而不是它的孩子，如下面的代码段所示（从Chrome Inspect Window复制）。此外，在“sub-nav”

下没有添加空锚节点

<nav>
  <a href="#">A1</a>
  <a href="#">A2</a>
  <nav>
    <a href="#"></a>
    <a>2.1</a>
  </nav>

  <a href="#">A3</a>
</nav

我尝试将“子导航”显示更改为内联，但没有任何改变。我在Chrome和Chrome上都发现了这种行为。 Firefox浏览器。那么，你知道这种行为背后的原因是什么吗？

Answer 1

即使嵌套锚点包含在<nav>元素中，也不能在锚标记内放置锚标记。

惯例是使用<ul>标记来嵌套导航元素（链接列表）。

Chrome很不错，并尝试修复无效标记。

Answer 2

试试这个：

<ul>
    <li><a href="#">A1</a></li>
    <li>A2
        <ul id="sub-nav">
            <li><a href="#">A2.1</a></li>
        </ul>
    </li>
    <li><a href="#">A3</a></li>
</ul>

问题来自将元素放入元素中。

嵌套导航离开其父锚元素

2 个答案: