Question

As it stands i have created a navigation menu using the background-position css property. 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;
}

on the shop link i have created a drop-down function to display another menu, the issue i am having is all the tags within my property are duplicating the background of

nav-menu li a

Is there a way i can cancel out this particular background image in my show and hide menu to display another background image?

Answer 1

Replace in your css :

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

With :

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

Know more about Direct Decedent Selector ( ” > ” ) Here