Superfish - Link Width Changes on Hover

Question

I'm using Superfish for a site that I'm developing and I've run into a little annoying problem that I can't solve.

Basically, the menu looks fine until you hover over a menu item with a sub menu. I have arrows enabled to indicate when there is a sub menu but when you hover over an item, the text nudges around. I have looked for hover specific styles but there is nothing I can see that causing this.

It looks as though the anchor reduces in width by 2 pixels which means the text moves. I've tried adding a fixed width to see if this would solve the issue but the problem still occurs.

Also, in the sub menus I have the text align set to left rather than centre - the arrow still moves but the text behaves properly. I think this is just down to the width of the anchor changing as I mentioned before.

The last thing I've noticed is that it happens when the submenu is changed from 'display: none' to 'display: block' but I can't figure out why that causes the text to move.

The site is http://www.broder-metals-group.com/2014/

To recreate the issue - just hover over 'Product Range' or 'News' and you'll see the submenu open and the text move around slightly.

Thanks!

Answer 1

Works fine in my firefox browser. Has the problem you mention in Google chrome browser. I disabled:

this rule:

display: table-cell;

under:

.home .sf-menu li a 

That removed the "jump" issue in Chrome, but obviously messes up the formatting a bit.

Can you achieve the formatting without using "table-cell" ?

Maybe just change

padding: 0 20px;

to

padding: 10px 20px;

in

.home .sf-menu li a