title: make the link clickable area equal to the size of the parent element (<li>), even if the parent has padding
body: <p>Hello guys I have a menu item with links within each entry.</p>
  
  <p>I would like to make clickable the entire tag <code>&lt;li&gt;</code> to run the link. </p>
  
  <pre><code> &lt;li style="padding: 10px 0 10px 15px;"&gt;
    &lt;a href="#"&gt;Link&lt;/a&gt;
   &lt;li&gt;
  </code></pre>
  
  <p>I searched on the forum and I understand that to achieve (in part) what I want, i should add:</p>
  
  <pre><code> a {
    display: block;
    width: 100%;
    height: 100%;
   }
  </code></pre>
  
  <p>but in my <code>&lt;li&gt;</code> i have padding and so the clickable area of link it isn't equal to size of <code>&lt;li&gt;</code>. I tried to delete padding of <code>&lt;li&gt;</code> and add it to <code>&lt;a&gt;</code>, but then the clickable area comes out of tag li....</p>
  
  <p>How can I solve the problem?</p>
  
  <p>thanks</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>this is a jsfiddle example <a href="http://jsfiddle.net/zgqyLuq4/1/" rel="nofollow">http://jsfiddle.net/zgqyLuq4/1/</a>
  The clickable area of link COMES OUT its parent (<code>&lt;li&gt;</code>)</p>