Adding margins to display: table-cell child element

Question

I've been attempting to build a navigation using display: table. The code is a simple div as display: table, a ul for the display: table-row and each li as display: table-cell.

Each li has an a tag inside and I simply want to add a margin to a tag for the active page in the navigation defined by an .active class, however it seems to add the margin for every li.

Any idea what is going on here?

Working example: http://jsfiddle.net/Gxpb3/4/

Code

<div>
    <ul>
        <li><a href="#">Pie</a></li>
        <li><a href="#">Pie</a></li>
        <li><a href="#">Pie</a></li>
        <li class="active"><a href="#">Pie</a></li>
        <li><a href="#">Pie</a></li>
        <li><a href="#">Pie</a></li>
    </ul>
</div>

div {
    margin-top: 50px;
    display: table;
    width: 100%;
}

ul {
    display: table-row;
    max-width: 400px;
    margin: 0 auto;
}

li {
    display: table-cell;
    text-align: center;
    background: red;
    height: 50px;
}

a {
    color: #fff;
    display: block;
    background: black;
}

li.active a {
    margin-top: 5px; 
}

a:hover {
    background: grey;
}

Answer 1

Well I've figured it out. Strangely, all the li elements increase in size when margin is added to one of the a tags. Adding vertical-align with any value seems to prevent them expanding and produces the desired effect.

However, I have no idea why this happens.

Fiddle: http://jsfiddle.net/2DGjV/