html - より広い領域でタグをクリック可能にする

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