IE，Firefox中的下拉多级悬停问题答案

【问题标题】：Dropdown multilevel hover issue in IE, firefoxIE，Firefox中的下拉多级悬停问题
【发布时间】：2012-03-29 03:02:25
【问题描述】：

我在 dropmenu 中使用了 superfish，但是在 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;


}

问候

【问题讨论】：

标签： jquery css drop-down-menu superfish

【解决方案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;
}

编辑。定位嵌套的li

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

您可能需要使用这些值。

【讨论】：

【解决方案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 脚本应该在顶部你的标题。

【讨论】：