css - 多级导航菜单悬停问题

Question

我的导航几乎完全按照我想要的方式工作。我似乎无法弄清楚的唯一问题是我在子导航上使用的这个小箭头图像，它表明它包含另一个级别的子导航。

ul#css3menu ul span {
    background-image: url("images/arrowsub.png");
    padding-right: 28px;
}
ul#css3menu ul span:hover {
    background-image: url("images/arrowsubhover.png");
    padding-right: 28px;
}

当您将鼠标悬停在带有箭头的每个子导航上时，它会加载不同颜色的箭头图像，以与悬停时变化的背景颜色保持对比。
问题是当您将鼠标悬停在下一级子导航上时，箭头切换回来，而背景颜色保持不变(应该如此)。

为什么父 li 的背景颜色没有失去其悬停规则，但箭头却失去了？

您可以使用此 js fiddle 查看行为和代码

Answer 1

在您的情况下，最好在列表项的主容器上分配悬停状态，而不是仅针对菜单列表项中的特定元素。在您的情况下，将 js fiddle 上的第 196 行更改为 .submenu li:hover span 。即使您向下移动一个级别来访问子菜单项，默认情况下您仍将鼠标悬停在父元素上。

此外，在设置样式时最好不要使用 ID。 ID 通常是为 Javascript 保留的。