html - 带有背景图像下拉问题的选项卡菜单

Question

我有一个下拉菜单，当我滚动时会出现一个下拉菜单。唯一的问题是我的主列表的背景图像也显示为子菜单列表的背景。

下面是我的 CSS，用于在鼠标悬停时分配选项卡背景。但我假设，由于技术，用户仍在滚动 <li>选项卡背景显示在所有子 <li>

CSS:

#main_menu ul li:hover a {
  background: url(images/right_tab_bg.png) top right no-repeat;
  color: #578ba0;
}

#main_menu ul li:hover a span {
  background: url(images/left_tab_bg.png) top left no-repeat;
}

有没有办法告诉上面的 css 只影响父级 <a>或 <span> ？

Answer 1

通过直接后代选择器使您的选择器更加具体(我假设顶级列表 ul 是 #main_menu 的直接后代):

#main_menu > ul > li:hover > a /* select only the parent li's a */
#main_menu > ul > li li a /* select any child li's a, excluding the top level li */