ここで大きなクリック可能領域の内部リンクを作成するには良い記事です：リンク（CSSのみ）
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; }
うわー、マークアップも有効です！キーは '外側'リンクに 'line-height：100％'を設定しています。とてもかっこいい。 –
これは、親ブロックに1行のテキストを中央に配置する簡単な方法の1つです（たとえば、2行のテキストでは機能しません）。それが気になるのなら、それは重要なのは上のリンクの 'display：block'です。あなたが望むようにサイズを設定するためにリンクで望むことができるのです。 – Gareth
ああ、わかります。ありがとう。 –
少し厄介かもしれないが、私はすぐに仕事で最後の5分でそれを一緒に入れて、このhttp://jsfiddle.net/5MkVW/を試みるが、やってみます。
実際のリンクで更新しました：http://jsfiddle.net/XdtN2/。 IE9での動作確認済み（無効なHTMLにもかかわらず） –
だから赤い領域のそれぞれはクリック可能ですか？大きな緑地はそうですか？ –
はい、そうです。もちろん、大きな緑色の領域を2つの半分にスライスして分かれていても、視覚的に一緒に流れるようにしてもかまいませんが、緑色の領域にホバー効果を持たせたい場合は、JavaScriptなしで不運になります。 –
@danielfaraday - 私はスライスが正しい解決策だと思います。ギャップのない隣接するクリック可能な領域を有することは、混乱を招く誤操作を招く可能性がある。あなたが言及しているスタイリングの問題は、周りに得ることができます、私の答えを参照してください – Gareth