title: Make <a> tag clickable for bigger area
body: <p>I have a menu, where I want my  tag to be clickable on a much bigger area on hover, basically for the width and hegiht of the menu.</p>
  
  <p>This is the code I have now: <a href="http://jsfiddle.net/uwJTC/14/" rel="nofollow">http://jsfiddle.net/uwJTC/14/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="box"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#"&gt;Basic but good&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;This is a longer one&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;Shorter&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>I hope you know what I mean. If you don't please ask.</p>