这是一篇关于在较大的可点击区域内创建链接的好文章：
http://css-tricks.com/links-inside-of-larger-clickable-areas/
此解决方案需要JavaScript.在文章的最后,有一个断开的链接到一个只有CSS的解决方案(所以显然它可以完成),但我不知道如何只使用CSS.有任何想法吗？
解决方法
对我来说似乎不太难(
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; }
