Submenu inheriting main menu's sprite image?

HTML & CSS
1

Here is a quick snippet of my CSS for the Main Menu:

[COLOR=“Blue”]#main li a{
background-image:url(site_images/nav_sprite.jpg);
background-repeat: no-repeat;
height:39px;
display: block;}

#main li a.home{background-position: 0px 0px; width:48px;}[/COLOR]

problem I’m having is, the submenu to one of the links is showing background-image:url(site_images/nav_sprite.jpg);
Is this because my #main li a also affects #sub’s li? This is how my html is structured.
<ul id=“main”>
<li><a></a>
<ul id=“sub”>
<li><a></a></li>
</li>

2

Dont quite follow you…

3

or try to target the ul li’s in li in main to remove background.

#main li ul li a{
background-image:none;}

or

#main #sub li a{
background-image:none;}

4

Stevie was saying use the child selector (>) so that you only target the immediate children of the ul but he forgot to add the next bit to target only the immediate child of the list element also (#main > li > a {}).

e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#main > li > a  {
    background:red
}
</style>
</head>
<body>
<ul id="main">
    <li> <a href="#">red</a>
        <ul id="sub">
            <li><a href="#">not red</a></li>
        </ul>
    </li>
</ul>
</body>
</html>

However IE6 doesn’t understand the child selector so if you want to support IE6 then use noonope’s version above which cancels out the background on deeper nested lists.

5

Yes, #main li affects all <li>s within <…id=“main”>

If you only want the background to affect <li>s that are direct children of <…id=“main”>, you need
#main > li {…}

Note that this is not supported by IE6.