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

Question

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

基本上，除非您将鼠标悬停在带有子菜单的菜单项上，否则菜单看起来不错。我启用了箭头以指示何时有子菜单，但是当您将鼠标悬停在某个元素上时，文本会四处移动。我一直在寻找特定于悬停的样式，但我看不到任何导致这种情况的原因。

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

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

我注意到的最后一件事是，当子菜单从“显示:无”更改为“显示: block ”时会发生这种情况，但我无法弄清楚为什么会导致文本移动。

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

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

谢谢!

Answer 1

在我的 firefox 浏览器中工作正常。有你在谷歌浏览器中提到的问题。我禁用了:

这条规则:

显示:表格单元格；

下:

.home .sf-menu li a 

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

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

也许只是改变

padding: 0 20px;

到

padding: 10px 20px;

在

.home .sf-menu li a