li要素内のaタグのクリック範囲を広げる方法

li要素をつかってメニューを作る時に、
li要素内全てはリンク可能なクリック範囲にしたい場合がちょいちょいあります。

そんな時は、下記のように対処します。

htmlコード

<ul>
  <li><a href='#'>aaaa</a>
  <li><a href='#'>bbbb</a>
  <li><a href='#'>cccc</a>
</ul>

cssコード

ul li a {
 display: block;
}
ul li a:hover {
 color: #ffffff;
 background-color: #000000;
}