背景定位下拉菜單問題

Question

就目前而言，我已經使用background-position css屬性創建了一個導航菜單。 點擊這里

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

在shop鏈接上，我創建了一個下拉功能來顯示另一個菜單，我遇到的問題是我財產中的所有標簽都在復制背景

導航菜單

有什么方法可以取消我的“顯示和隱藏”菜單中的特定背景圖像以顯示其他背景圖像嗎？

Answer 1

在＃nav-menu li a中，您應該使用后代運算符，以便僅選擇直接子代。

例如

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

在此處了解有關直接后代選擇器（“>”）的更多信息

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