CSS Select only List after 1st layer

Question

Given

<ul class="menu">
<li> <!-- layer1 -->
    <a href="/gbcweb/index.php?option=com_content&amp;view=article&amp;id=19&amp;Itemid=27">
        <span>sub menu</span>
    </a>
    <ul>
        <li><!-- layer2 -->
            <a href="/gbcweb/index.php?option=com_content&amp;view=article&amp;id=22&amp;Itemid=34">
                <span>sub menu1</span>
            </a>
            <ul>
                <li><!-- layer3 -->
                    <a href="/gbcweb/index.php?option=com_content&amp;view=article&amp;id=22&amp;Itemid=34">
                        <span>sub menu2</span>
                    </a>
                    <!-- Continue layering -->
                </li>
            </ul>
        </li>
    </ul>
</li><ul>

How do I select all the from layer 2 onwards?And set a background image to all sub menu.

Answer 1

ul li li {
   background-image: url(smotheing.jpg);
}

Answer 2

Try .menu ul li{}

Answer 3

There is also the > operator that is meant to select only the immediate children of the element before it.

For instance, if I had a multiple-level list like you do, I could write the following:

ul li {
    /* normal list styles */
}

ul > li {
    /* style to apply ONLY to first-level <li> tags */
}

ul > li > ul > li {
    /* style to apply ONLY to second-level <li> tags */
}

ul > li li {
    /* style to apply to everything BELOW the first level */
}