Html 为什么标记中的span已损坏dom treeview？

HTML

<div class="wrapper">
    <a href="#">
        Link-1
        <span class="sub-list hidden">
            <a href="#">SubLink-1</a>
            <a href="#">SubLink-2</a>
            <a href="#">SubLink-3</a>
        </span>
    </a>
    <a href="#">Link-2</a>
    <a href="#">Link-3</a>
</div>

我想创建一个菜单和子菜单。但当我用span包装器将子菜单放在a标记下时，domtreeview出现损坏，如下图所示；

---

这是为什么？

您正在链接中嵌套链接，这是禁止的：

由A元素定义的链接和锚点不得嵌套；A 元素不能包含任何其他A元素

.wrapper {
    border-bottom: 1px solid #dfdfdf;
    padding-bottom: 5px;
    padding-right: 50px;
    height: 25px;
}

.wrapper > a {
    font-size: 13px;
    font-weight: bold;
    padding: 5px 6px;
    border: 1px solid #ffffff;
    border-bottom: none;
    float: right;
    display: block;
}


.sub-list {
    background-color:#ffffff;
    width: 251px;
    height: 40px;
    border-right: 1px solid #dfdfdf;
    border-left: 1px solid #dfdfdf;
    border-bottom: 1px solid #dfdfdf;
    padding: 10px 10px 0 0;
    text-align: right;
}