Как сделать весь блок доступным?

Question

Я создал меню навигации, но проблема, с которой я сталкиваюсь, заключается в том, что когда я наводил указатель мыши на край каждого блока меню, тэг ancor не работает, он работает только тогда, когда я помещаю мышь рядом с текстом. мой вопрос в том, что я хочу сделать весь блок кликабельными любыми решениями?

Здесь fiddle.

Наценка.

<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

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

Answer 3

Поместите <a href> перед тем <li> :) и близко </a> после </li>