展开元素以填充li

Question

I'm trying to expand the a elements of this jsfiddle to fill the li element, but display:block does not work as I'm using a table to space them.

How can this be done in order for my colored corners to work? As I've got a background set on both a and the li elements to give the illusion of colored corners.

http://jsfiddle.net/286bu/

Answer 1

Add a height parameter to your a tag so it fills the entire height of the li :

.menu a {
    font-size: 11px;
    color: #FFFFFF;
    display: block;
    background: #000;
    padding: 5px 20px;
    -webkit-border-radius: 0px 0px 10px 0px;
    border-radius: 0px 0px 10px 0px;
    text-transform: uppercase;
    height:100%;
}