品牌<a>標籤可點擊更大的區域

Question

我有一個菜單，我希望我的標籤可以在懸停的更大區域點擊，基本上是菜單的寬度和高度。

這是我現在的代碼：http://jsfiddle.net/uwJTC/14/

HTML

<div id="box"> 
    <ul> 
     <li><a href="#">Basic but good</a></li> 
     <li><a href="#">This is a longer one</a></li> 
     <li><a href="#">Shorter</a></li> 
    </ul> 
</div> 

CSS

#box ul { 
    width: 230px; 
    height: 160px; 
    float: right; 
    margin: 0px 0 15px 900px; 
    background:#999; 
    list-style: none; 
} 

#box ul li { 
    background: red; 
    border: 1px solid #222; 
} 

#box ul li:hover { 
    background: yellow; 
} 

#box ul li a { 
    padding: 10px; 
} 

我希望你知道我的意思。如果你不請問。

Answer 1

像這樣？ http://jsfiddle.net/Allendar/uwJTC/16/

#box ul li a { 
    padding: 10px; 
    display: block; 
    width: 100%; 
}