使 <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%;
}