Superfish - 悬停时的链接宽度变化

Question

我正在将 Superfish 用于我正在开发的网站，但遇到了一个我无法解决的烦人问题。

基本上，在您将鼠标悬停在带有子菜单的菜单项上之前，菜单看起来还不错。我启用了箭头来指示何时有子菜单，但是当您将鼠标悬停在某个项目上时，文本会四处移动。我一直在寻找特定于悬停的样式，但我看不到任何导致此问题的原因。

看起来锚的宽度减小了 2 个像素，这意味着文本移动了。我已经尝试添加一个固定宽度，看看这是否能解决问题，但问题仍然存在。

此外，在子菜单中，我将文本对齐设置为左对齐而不是居中 - 箭头仍然移动，但文本行为正常。我认为这只是我之前提到的锚点宽度的变化。

我注意到的最后一件事是当子菜单从“显示：无”更改为“显示：阻止”时会发生这种情况，但我不知道为什么会导致文本移动。

网站是http://www.broder-metals-group.com/2014/

要重现问题 - 只需将鼠标悬停在“产品范围”或“新闻”上，您就会看到子菜单打开并且文本略微移动。

谢谢！

Answer 1

在我的 Firefox 浏览器中运行良好。有你在谷歌浏览器中提到的问题。 我禁用了：

这条规则：

display: table-cell;

下：

.home .sf-menu li a 

这消除了 Chrome 中的“跳转”问题，但显然有点弄乱了格式。

不使用“table-cell”可以实现格式化吗？

也许只是改变

padding: 0 20px;

到

padding: 10px 20px;

在

.home .sf-menu li a