Liên kết bên trong khu vực có thể click lớn hơn (CSS Only)

Question

Dưới đây là một bài viết tốt vào việc tạo ra các liên kết bên trong khu vực có thể click lớn hơn:

http://css-tricks.com/links-inside-of-larger-clickable-areas/

Giải pháp này cần JavaScript. Ở cuối bài viết, có một liên kết bị hỏng đến một giải pháp chỉ CSS (vì vậy dường như nó có thể được thực hiện), nhưng tôi không thể tìm ra cách thức này sẽ được thực hiện chỉ với CSS. Bất kỳ ý tưởng?

Answer 1

Không quá khó với tôi (JSFiddle).

HTML:

<header> 
    <a href="#1">Clickable</a> 
    <nav> 
     <ul> 
      <li> 
       <a href="#2">Clickable</a> 
      </li> 
      <li> 
       <a href="#3">Clickable</a> 
      </li> 
      <li> 
       <a href="#4">Clickable</a> 
      </li> 
      <li> 
       <a href="#5">Clickable</a> 
      </li> 
     </ul> 
    </nav> 
</header> 
​ 

CSS:

a { color: #f4ebd4; font-family: sans-serif; text-decoration: none; text-transform: uppercase; font-size: 0.8em; } 

header { text-align: center; } 

header > a { display: block; line-height: 100px; } 

header > a, header > a + nav { background: #4b885c; } 
a:hover, a:hover + nav { background: blue; } 

nav ul { display: table; width: 100%; } 
nav li { display: table-cell; } 
nav a { display: block; background: #a51d2c; padding: 10px 20px; margin: 10px; } 
​ 

Answer 2

thử này http://jsfiddle.net/5MkVW/ tôi nhanh chóng đặt nó lại với nhau trong 5 phút cuối cùng tại nơi làm việc, có thể là một chút lộn xộn nhưng có một đi.