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