Question

我使用superfish进行dropmenu，但在IE 8,9和Firefox中渲染时遇到问题，它在safari和chrome上工作正常，在悬停产品时，锚文本向上移动，我花了几个小时就修改了css没有成功，任何人都可以帮助我，我在哪里弄错了，下面是网站：

test-website悬停效果可以在产品子列表中找到。

.sf-menu li a
{
    float: none;
    border: none;
    margin: 0;
    display: inline-block;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 11px;    

    height: 23px;

    font-weight: bold;

}

.sf-menu li a:hover
{
    display: inline-block;
    height: 0px !Important;
    text-decoration: none;
    font-weight: bold;
    line-height: 20px;
    padding: 0px 0px 0px 20px ;
    float: left;


}

此致

Answer 1

将line-height: 20px;更改为line-height: 24px;

.sf-menu li a:hover {
    display: inline-block;
    float: left;
    font-weight: bold;
    height: 0 !important;
    line-height: 24px;
    padding: 0 0 0 20px;
    text-decoration: none;
}

EDIT。定位嵌套的li

.sf-menu ul li ul li a:hover {
       padding: 0 0 0 20px;
       line-height: 20px;
}

您可能需要使用这些值。

Answer 2

你的子菜单没有参考点从哪里下拉，你指定子菜单的容器是绝对的以及子菜单ul本身，我很惊讶它甚至可以在全部在Chrome中，请尝试按此方法修复它：

.quiklinks li {
    position:relative;
}

在 jquery.superfishmenu.css 样式表下，修复以下内容：

删除以下类中的position:absolute规则：

.categoriesHeaderMenu {
    position:absolute; /* remove */
}

将子菜单ul类设置为以下内容：

.categoriesHeaderMenu ul {
    position:absolute; /* currently it is set as relative, change it to absolute */
    left:0;
}

另外，不知道你是否注意到了这一点，但是你的子菜单下包含你的 jquery.superfishmenu.css 样式表和菜单的js脚本，它应该位于顶部你的标题。

在IE浏览器中下拉多级悬停问题，firefox

2 个答案: