背景定位下拉菜单问题

Question

目前我已经使用background-position css属性创建了一个导航菜单。 click here

    #nav-menu li a{
    background: url("images/navbar.png") no-repeat scroll 0 0 transparent;
    display: block;
    cursor: pointer;
    height: 102px;
}

#nav-menu .shop a{
    background-position: left top;
    width: 139px;
}

在商店链接上我创建了一个下拉功能来显示另一个菜单，我遇到的问题是我的属性中的所有标签都是重复的背景

nav-menu li a

有没有办法可以在我的节目和隐藏菜单中取消这个特定的背景图像来显示另一个背景图像？

Answer 1

<＃>在＃nav-menu li中你应该使用后代运算符，以便只选择直接子项。

例如

#nav-menu > li > a

Answer 2

替换你的css：

#nav-menu li a{
background: url("images/navbar.png") no-repeat scroll 0 0 transparent;
display: block;
cursor: pointer;
height: 102px;
}

使用：

#nav-menu > li > a{
background: url("images/navbar.png") no-repeat scroll 0 0 transparent;
display: block;
cursor: pointer;
height: 102px;
}

了解有关直接死亡选择器（“＆gt;”）Here

的更多信息

Answer 3

你可以使用第一个孩子;仅将背景设置为第一个元素

     #nav-menu li:first-child a{
        background: url("images/navbar.png") no-repeat scroll 0 0 transparent;
    }

或者您可以在另一个<li>元素之后的所有<li>元素上强制背景为其他内容

    #nav-menu li + li a{
        background-image: none;
    }