display:table in to get vertical-align:mi

Question

On a <nav> bar layout I used display: table on the parent <ul><li> item and display: table-cell on the child <a> item to be able to use vertical-align: middle on the <a> item. (Some items are multiline, so setting line-height is not a possibility).

On Chrome/Chromium I get the whole <nav> bar 'shifting' to the right when I hover over menu items (only when they have children).

This doesn't happen on Firefox.

Load the jfiddle in both browsers and see:

http://jsfiddle.net/qcQKP/2/

Does anyone have any ideas why this happens? / how to get around it?

Thanks!

Answer 1

I think the left shift is due to your first level li's being floated left. If you change these to table-cells as well you should stop the shift:

nav > ul > li {
    font-size: 11px; /* 11px */
    position: relative;
    max-width: 16em;
    height: 36px;
    display: table-cell;
    vertical-align: middle;
}

Example