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 */