当子菜单处于活动状态时,IE8列表项悬停会影响其他列表项

时间:2011-08-12 13:43:48

标签: css internet-explorer-8 cross-browser

我有一个使用列表的主菜单。当用户将鼠标悬停在某个项目上时,它会向上移动以指示在更改背景颜色并显示其子菜单时将鼠标悬停在用户身上。

Link to the website with the issue.

  

如果需要firebug,请将debug = true添加到查询字符串中。

问题出在IE8中,如果子菜单处于活动状态并且用户将鼠标悬停在主级别中的任何列表项上,则所有之前的项目都会像它们一样悬停在上面。这意味着这些列表项会向上移动,但background-color不会更改。根据用户如何将鼠标移动到列表项上,某些项甚至会低于起始位置。

以下是我转换为SASS的{​​{1}},以帮助了解我如何移动我的菜单项。

CSS

子菜单处于活动状态与否之间的唯一区别是主级别列表项具有类#mainmenu ul li:hover, #mainmenu ul li.active{ margin-top: -15px } ,任何css都不使用该类,活动子列表项获取类{{1 }}

我感觉问题介于subactive更改和active负值之间。

通常人们会期望之后的元素受到影响,而不是之前的元素。

请避免任何background-color修正。

谢谢!

1 个答案:

答案 0 :(得分:3)

在IE8中,当您调整margin-top: -15px时,它会推动UL框顶部适合,而不是让LI超出UL框。所以其他所有标签都向上移动以适应新的UL盒子。

我建议将非悬停LI设置为margin-top: 15px并将LI悬停至margin-top: 0 - 将其反转。

#mainmenu UL LI
{
    margin-top: 15px;
}

#mainmenu UL LI:hover
{
    margin-top: 0;
}

(这仍然适用于跨浏览器。)