How do I make an <a> tag the size of it's parent <li> tag for larger clickable region?
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; }
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/