Re: li background inheritance problem

[Rob MacKay]

Its not actually inheriting it at all, its doing exactly what you want it to do… that <li> background is yellow, its just that the li expands around the UL that holds the nested items :)

For example if you set the background of #menu ul li ul li {background:#eee} it will change the nested UL’s LI’s to the same #eee you are using for the main UL, and will no longer be by default transparent. Do you see? its not that they are picking up the colour, its that you can see through them onto the LI that has the colour yellow as the background. They are inside it so it picks it up.

A quick fix:

add the bold text

#menu li a.active {
background:yellow url(arrow.gif) no-repeat left center;
display:block;
padding: 0 1.25em;
}

delete or comment out this…

#menu li.active {
background: yellow;
}

Is that more what you are after?