html - 为什么标记中跨度的 dom TreeView 损坏？

Question

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>

CSS

.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;
}

http://jsfiddle.net/6vAQF/1/

我想创建一个菜单和子菜单。但是，当我将子菜单放在带有跨度包装器的 a 标签下时，dom treeview 显示为已损坏，如下图所示；

这是为什么？

Answer 1

您在链接中嵌套链接，这是被禁止的:

Links and anchors defined by the A element must not be nested; an A element must not contain any other A elements.

http://www.w3.org/TR/html401/struct/links.html#h-12.2.2

Creating anchor tag inside anchor tag