Question

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

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

当您使用箭头将鼠标悬停在每个子视图上时，它会加载不同颜色的箭头图像，以保持与悬停时更改的背景颜色形成对比。
问题是当你将鼠标悬停在下一级subnav上时，箭头会在背景颜色保持变化时切换回来（应该如此）。

为什么父李的背景颜色不会丢失其悬停规则但箭头会失去？

您可以使用此js fiddle

查看行为和代码

Answer 1

看起来影响悬停时背景颜色的规则是ul#css3menu ul li:hover>a

由于ul#css3menu ul li:hover检测到悬停在任何<{em> li元素上的ul#css3menu ul的子元素，并且第二级子菜单也包含{{1} }，当您将鼠标悬停在第二级li上时，会保留第一级li的悬停状态，因为原始规则仍然有效（因为当您将鼠标悬停在任何子li，包括第二级li s。

当li为真时，CSS样式随后会应用于直接子ul#css3menu ul li:hover（而不是应用于a），以便为您提供{{1}的完整规则}。这让我很困惑，因为检测与样式的应用分开进行。希望这会有所帮助。

Answer 2

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

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

多级导航菜单悬停问题

2 个答案: