How do I make an tag the size of it's parent 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:

Answer 1

Try this css

li{
    border:1px solid black;
    height:40px;
}

li a{
    border:1px solid red;
    display:block;
    height:100%;
}