html - 嵌套的href出现问题

在嵌套href时将鼠标悬停在框上时，如何使整个蓝绿色框（类名nav-about）可点击？这可能吗？

JSFIDDLE链接http://jsfiddle.net/K8w4g/1/

的HTML

<a href="about.html">
<div 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>

的CSS

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

最佳答案

不幸的是，这是不可能的。但是，您可以使用onclick通过javascript实现此目的：

<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>

您仍然可以单击div内的链接。

另一种解决方案是将div替换为span，因为仅将a标记包裹在诸如span之类的某些元素上是有效的，因此您的新代码应如下所示：

<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>