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

时间:2014-04-15 11:58:38

标签: javascript css hover superfish

我使用Superfish作为我正在开发的网站,而且我遇到了一个我无法解决的烦人问题。

基本上,菜单看起来很好,直到您将鼠标悬停在带有子菜单的菜单项上。我启用了箭头以指示何时存在子菜单但是当您将鼠标悬停在某个项目上时,文本会轻轻推动。我一直在寻找悬停的特定风格,但是没有什么我能看到的导致这种情况。

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

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

我注意到的最后一件事就是当子菜单从显示中更改时出现:无'显示:阻止'但我无法弄清楚为什么会导致文本移动。

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

重新创建问题 - 只需将鼠标悬停在'产品范围'或者'新闻'并且你会看到子菜单打开,文字稍微移动。

谢谢!

1 个答案:

答案 0 :(得分:1)

在我的Firefox浏览器中正常工作。您是否在Google Chrome浏览器中提到了问题。 我禁用了:

这条规则:

display: table-cell;

下:

.home .sf-menu li a 

删除了"跳跃"在Chrome中出现问题,但显然有点混淆了格式。

你可以在不使用" table-cell"的情况下实现格式化吗? ?

也许只是改变

padding: 0 20px;

padding: 10px 20px;

in

.home .sf-menu li a