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

【问题标题】：IE8 list item hover affect other list items when sub-menu active当子菜单处于活动状态时，IE8 列表项悬停影响其他列表项
【发布时间】：2011-10-25 20:07:02
【问题描述】：

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

如果需要 firebug，请在查询字符串中添加 debug=true。

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

这是我转换为CSS 的SASS，以帮助了解我如何移动我的菜单项。

#mainmenu ul li:hover,
#mainmenu ul li.active{
    margin-top: -15px
}

在 HTML 中，子菜单处于活动状态和非活动状态之间的唯一区别是主级别列表项有一个类 subactive，它不被任何 css 使用，而活动子列表项有一个类 active。

我感觉问题出在background-color 更改和margin-top 负值之间。

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

请避免任何Javascript 修复。

谢谢！

【问题讨论】：

【解决方案1】：

在 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;
}

（这仍然可以跨浏览器工作。）

【讨论】：

谢谢你为我做的！我想到了 UL 盒子顶部适合但 IE8 调试器告诉我的问题（不应该那么信任它）。从逻辑上讲，它会使所有元素都随之向上移动，而不仅仅是悬停元素左侧的元素。再次感谢您。
是的，IE 有时是一团糟。我不知道为什么它提出了一些而不是其他的；也许是 UL 和边距中的浮动组合？当您让所有内容相互交互时，浏览器渲染会变得非常复杂。