How can I get an anchor inside these list items to fill the space of the list item?

Question

I'm using a fairly typical nested UL setup to create a dropdown menu, however I can't get the anchorlinks inside the li to expand to their height.

The HTML

<div id="navbar-container">
<ul id="navbar">
    <li><a href="#">Home</a></li>
    <li><a href="#">Lessons</a></li>
        <ul>
            <li><a href="#">sub item1sdfsdfsdfsdfsdf</a></li>
            <li><a href="#">sub item2</a></li>
            <li><a href="#">sub item3</a></li> 
        </ul>
    </li>
    <li><a href="#">Custom Fitting</a></li>  
</ul>
</div>

In the CSS I'm using display:block on the anchor tags which does make them expand to the width of the li but not the height. I have tried using padding but it does not work correctly across all browsers. #navbar is using display: table and the children lis are using display: table-cell. This is so the navbar can expand and contract to fit the screen size. I suspect display: table-cell may have something to do with the anchors not expand vertically.

Here is a JSFiddle so you can see what I'm talking about.

The CSS

#navbar-container {
min-width: 768px;
height: 32px;
position: relative;
background-color: #bb4212;
}
#navbar {
list-style-type: none;
display: table;
width: 100%;
font : 14px"Arial", sans-serif;
height: 100%;
}
#navbar li {
text-transform:uppercase;
display: table-cell;
text-align: center;
}
#navbar li a {
color: #f2f2f2;
display: block;
border-left: 1px solid #c17455;
}
#navbar > li:first-child a {
border: 0;
}
#navbar li ul {
list-style-type: none;
background-color: #f2f2f2;
position: absolute;
right: -9999px;
top: 32px;
margin-left: 1px;
-moz-box-shadow: 0px 6px 4px 0px #898989;
-webkit-box-shadow: 0px 6px 4px 0px #898989;
box-shadow: 0px 6px 4px 0px #898989;
}
#navbar li ul li:hover {
background-color: #bb4212;
}
#navbar li ul a:hover {
color: #f2f2f2;
}
#navbar li:hover {
background-color: #f2f2f2;
}
#navbar li:hover a {
color: #000;
}
#navbar li:hover ul {
right: auto;
}
#navbar li ul li {
display: block;
text-align: left;
}
#navbar li ul li a {
border: 0;
white-space:nowrap;
margin: 0 5px;
text-decoration: none;
display: block;
}

Answer 1

My favorite technique for filling up a parent container 100% width and height is to use absolute positioning:

parent {
    position: relative; /* unless it's already positioned */
}

child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

Here it is applied to your JSFiddle: http://jsfiddle.net/Kgz5p/