html - 元素被推出 anchor

Question

我身上发生了一件奇怪的事情。

我有一个菜单，我尝试创建一个大型菜单。

我在 anchor 标记中添加一个 ul 来创建大型菜单，但它被推出了。有人知道为什么吗？

HTML:

<ul class="header_menu">
<li>
    <a href="#">
        Menu 1
        <ul class="sub_menu">
            <li><a href="#">Submenu 1</a></li>
        </ul>
    </a>
</li>

并使用查看源代码检查这张 html 图片。

image using view source

ul sub_menu 被推出 anchor 并放置在 anchor 附近，而不是作为 anchor 标签的父级。

有什么想法吗？

编辑:

正如 Quentin 所说，并且根据 w3c“嵌套链接是非法的”。更详细的解释在这里: https://www.w3.org/TR/html401/struct/links.html#h-12.2.2

Answer 1

您的 HTML 无效。

参见 The a element :

Content model: Transparent, but there must be no interactive content descendant.

您不能将一个链接作为另一个链接的后代。

如果删除嵌套链接，问题就会消失:

您可能希望“菜单 1”是一个链接，而“子菜单”是另一个链接。因此，在嵌套列表之前结束您的第一个链接。