嵌套hrefs问题

Question

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

的jsfiddle LINK 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; 
} 

Answer 1

不幸的是，这是不可能的。但是，您可以通过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> 

而且你还可以点击div中的链接。

另一个解决方案是与span更换div，因为它是唯一有效的环绕像span一些元素的a标签，因此新的代码应该是这样的：

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