How do I make an <a> tag the size of it's parent <li> tag for larger clickable region?

Question

I would like to do this so that the clickable region on the tag is size of the LI.

My html looks like:

<li>  <a href="#">Link</a> </li> 

Answer 1

As others have said

li a { display: block; } 

should achieve what you're after. But you must also remove any padding from the <li> and set it on the <a> instead. For example:

li { padding: 0; }   li a { display: block; padding: 1em; } 

Answer 2

In CSS:

li a {      display: block; } 

Of course, you'll want to make your selector more specific than that.

<ul>     <li class="myClass">         <a href="#">Link</a>     </li> </ul>  li.myClass a {     display: block;     background-color: #fdd; /* Demo only */ } 

http://jsfiddle.net/userdude/jmj2k/