html - ブロック全体をクリック可能にする方法は?

Question

ナビゲーション メニューを作成しましたが、マウスを各メニュー ブロックの端に置いたときに ancor タグが機能せず、マウスをテキストの近くに置いた場合にのみ機能するという問題に直面しています。私の質問は、ブロック全体をクリックできるようにしたいということです。

ここでフィドル。

マークアップ。

<div id="nav">
    <ul class="menu">
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About</a></li>
        <li><a href="/work/">Products</a></li>
        <li><a href="/contact/">Careers</a></li>
        <li><a href="/contact/">Contact</a></li>
    </ul>
</div>

CSS。

#nav {
    width: 960px;
    background: #222222;
}

.menu {
    width: 960px; 
    margin: auto;
    padding: 0;
list-style: none;
text-align: center;
}

.menu li {
    display: block;
    border-right: 5px solid #222222;
    border-bottom: 3px solid #222222;
    padding: 10px;
    float: left; 
    width: 166px;
    height: 20px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    background: #0C5E91;
}

.menu li:hover {
    background: #95d629;
}

.menu li a {
    display: block;
    float: left;
    width: 140px;
    height: 20px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
}

.menu li a { 
    text-decoration: none;
    color: white;
}

Answer 1

width、height、およびpaddingを</a>要素に追加し<li>ます。

http://jsfiddle.net/tv8Dw/2/

Answer 2

Put the <a href> before <li> :) and close </a> after </li>

Answer 3

$('#nav').click(function(){  alert('clicked'); });