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!
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