Why is the CSS for an a tag inside an li tag causing the li to not expand vertically to contain its content?

Why is the CSS for an a tag inside an li tag causing the li to not expand
vertically to contain its content?

I have a <div> with the ID #left, which cotnains another <div> with the ID
#container. Inside #container is a <ul>.
I thought the default would be that the <li> would vertically expand to
contain any and all text inside it. But it doesn't. This is the CSS:
#left {
width:200px;
}
#container {
margin: 0 6px;
overflow:hidden;
}
#container li {
background:greenyellow;
position: relative;
border: #BF0000 thin solid;
margin: 0 0 12px 0;
-webkit-border-radius: 6px;
border-radius: 6px;
clear:both;
}
#container li:hover {
background: #ffffff;
}
#container a {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
By using jsFiddle, I've discovered that it's the <a> tag, and something
about it's CSS properties that is breaking my <li> tag's height. However,
if I change the <a>, I lose the other effect I want, which is to be able
to click anywhere in the <li> and have it activate the link.
Can I get the <li> to expand vertically and also the <a> tag to fill the
entire <li>? I don't see why the <a> should impact the <li> the way it's
doing right now.