How to make inner UL list not inherit from outer UL List in CSS

For the HTML List below, I need to add a background image only to the LI of the outer list. (aka the one with class "menu-mlid-594 dhtml-menu expanded start-collapsed")

HTML codes are:

<li class="menu-mlid-594 dhtml-menu expanded start-collapsed ">
    About the Collection
    <ul cla开发者_Go百科ss="menu">
        <li class="leaf first dhtml-menu ">By Theme</li>
        <li class="leaf last dhtml-menu ">By Individual</li>
    </ul>
</li>

How can I do that?

Thanks.

li.menu-mlid-594 { your css rules here }

The above will only apply to li elements that have the class menu-mlid-594

Kind of hard to say what will work with so little contextual information, but in general you'll usually need to rely on cascading rules:

#outerULIdentifier li {
    background-image: url('someImage.jpg');
}
#outerULIdentifier li li {
    background-image: none;
}

I am assuming here that there is an ID or class on the outermost UL that you can reference. Alternatively, you could do something like:

li.dhtml-menu {
    background-image: url('someImage.jpg');
}
li.dhtml-menu.leaf {
    background-image: none;
}

Although this latter version might have problems in IE 6 (which doesn't support multiple classes on a single element in a CSS selector very well).

ul li {background:#F00;} /* First level */
ul li li {background:#FFF;} /* Second level */