Height/width definitions of tag was not implemented

Height/width definitions of tag was not implemented

First, see fiddle JSFIDDLE
I created a list
<div id="info_list">
<ul>
<li><a href="#">Milk</a></li>
<li><a href="#">Eggs</a></li>
<li><a href="#">Cheese</a></li>
<li><a href="#">Vegetables</a></li>
<li><a href="#">Fruit</a></li>
</ul>
</div>
The css of tag is
#info_list ul li a{
height: 30px;
width: 230px;
color: #AAA;
line-height: 30px;
text-decoration: none;
cursor: pointer;
}
However, even I regulated the height and the width, I still cannot reach
the url by clicking the space place of each list. It only works by
clicking the text.
Thanks!