how can we avoid the shake when we hover over an element and set its font to be bold

Question

How can we avoid the shake when we hover over an element and set its font to show bold? Here is a sample of the code I wrote:

http://jsfiddle.net/8v4Ag/

Is there a technique to avoid the shaking? Suppose I hover on LogOff, the font goes bold, but that line of text moves a little to the right due to the text getting emboldened. If we hover away it again shakes.

Is there any CSS way of avoiding such shakes?

Answer 1

I have solved this by having a non visible duplicate text with the hover style. Use visibility:hidden rather than display:none to make it take up space, and position it beneath the original text. This invisible element will make sure the text is wide enough for the hover state.

Her is an example