Html 嵌套的hrefs的问题

当我将鼠标悬停在长方体上，同时嵌套了一个hrefs时，如何使整个teal长方体（类名nav about）能够单击？这可能吗

jsiddle链接

HTML

---

不幸的是，这是不可能的。但是，您可以通过javascript使用

onclick

：

<div onclick="window.location.href='about.html'" class="nav-about">about
    <div class="sub-nav-about">
        <ul>
            <li><a href="1">1. one</a> </li>
            <li><a href="2">2. two</a></li>
            <li><a href="3">3. three</a></li>
        </ul>
     </div>
</div>

---

你不能有嵌套链接，想象一下如果你想点击一个子链接，你点击父链接…为什么不使用javascript

onclick

？也不要忘记你不应该把块元素（div）放在内联元素（a）中。

.nav-about {
float: left;
width: 254px;
height: 150px;
color: blue;
background-color: teal;
}

.sub-nav-about {
width: 150px;
}

.sub-nav-about ul {
list-style:none;
background-color:red;
}

<div onclick="window.location.href='about.html'" class="nav-about">about
    <div class="sub-nav-about">
        <ul>
            <li><a href="1">1. one</a> </li>
            <li><a href="2">2. two</a></li>
            <li><a href="3">3. three</a></li>
        </ul>
     </div>
</div>

<a href="about.html"> <span onclick="window.location.href='about.html'" class="nav-about">about
            <div class="sub-nav-about">
                <ul>
                    <li><a href="1">1. one</a> </li>
                    <li><a href="2">2. two</a></li>
                    <li><a href="3">3. three</a></li>
                </ul>
             </div>
        </div>
</a>