Question

I need to set background color on all li item inside a div. I am having hard time getting to the list item because of the mess sharepoint creates when the li are rendered. Each li are the result of a sharepoint server control render. This is essentially a top navigation with 6 menu items horizontally laid out and some of them even have sub menu items.

I need to set a bgcolor on all list items and change bg color on hover and change back to the original color on mouseout.

<div id="zz16_HDRNav" class="s4-tn">
    <div class="menu horizontal menu-horizontal">
        <ul class="root static">
            <li class="static">
                <a class="static menu-item" href="/">
                    <span class="additional-background">
                    <span class="menu-item-text">Home</span></span>
                </a>
            </li>
            <li class="static dynamic-children">
                <a class="static dynamic-children menu-item" href="/finance">
                    <span class="additional-background">
                    <span class="menu-item-text">Employee Center</span></span>
                </a>
                <ul class="dynamic">
                    <li class="dynamic">
                        <a class="dynamic menu-item" href="/finance/EMEA"><span class="additional-background">
                            <span class="menu-item-text">Benefits</span></span>
                        </a>
                    </li>
                    <li class="dynamic">
                        <a class="dynamic menu-item" href="/finance/APAC"><span class="additional-background">
                            <span class="menu-item-text">Travel</span></span>
                        </a>
                    </li>
                    <li class="dynamic">
                        <a class="dynamic menu-item" href="/finance/CORP">
                            <span class="additional-background"><span class="menu-item-text">TSO</span></span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="static">
                <a class="static menu-item" href="/team">
                    <span class="additional-background">
                    <span class="menu-item-text">Business Communities</span></span>
                </a>
            </li>
            <li class="static dynamic-children">
                <span class="static dynamic-children menu-item"><span class="additional-background"><span class="menu-item-text">Internal Services</span></span></span>
                <ul class="dynamic">
                    <li class="dynamic">
                        <a class="dynamic menu-item" href="/regions/NA">
                            <span class="additional-background"><span class="menu-item-text">North America</span></span>
                        </a>
                    </li>
                    <li class="dynamic">
                        <a class="dynamic menu-item" href="/regions/me">
                            <span class="additional-background"><span class="menu-item-text">Middle East</span></span>
                        </a>
                    </li>
                </ul>
            </li>
            <li class="static">
                <a class="static menu-item" href="/it">
                    <span class="additional-background"><span class="menu-item-text">Best Practices</span></span>
                </a>
            </li>
            <li class="static">
                <a class="static menu-item" href="/legal">
                    <span class="additional-background"><span class="menu-item-text">PolicyProcedures</span></span>
                </a>
            </li>
        </ul>
    </div>
</div>  

Answer 1

You can just use some straight CSS for that:

#zz16_HDRNav>.menu>ul>li
{
    background-color:gray;
}
#zz16_HDRNav>.menu>ul>li :hover
{
    background-color:red;
}

Fiddle: http://jsfiddle.net/johnkoer/XgExk/7/