Alternating Background Color of Menu Items Generated from query

I'm working on putting the finishing touches on a jquery menu which is dynamically generated. The menu holds reports assigned to employees based on their login. Some employees will have a menu with just two items while other employees can have a list 20 reports long.

I've seen how some posts implement CSS3 based on a list with a fixed number of items. My question is how can I do the same thing with this menu given that no two employees have the same number of items in their menu? Below is the current code of the menu.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<!---<link rel="stylesheet" href="/resources/demos/style.css" />--->
<script>
$(function() {
$("#menu" ).menu();
});


$(function() {
$(document ).tooltip();

});

function Refresh() {
child.location.reload(true);
}
</script>
<style>
    a{
        font-family:Arial;          
    }

#MainMenu
{
    background-color:"#58B0EB";
}
.ui-menu { width: 270px;
            font: Arial;
            font-size: small;                       
            }

 .ui-tooltip {
    background-image: none;
    background-color: #f7f792; 
    display: inline-block;
    font: Verdana;
    font-size:x-small;  
  }

</style>
</head>
<body>

<cfset User_Id=session.ft_user_id>  
<cfinvoke component="cfc.MainMenu" method="GetMenuHead" returnvariable="GetMenuHeadRet"> 
    <cfinvokeargument name="User_Id" value="#User_Id#"/>
</cfinvoke>

<ul id="menu">
    <li>            
        <a id="MainMenu" href="#">Reports and tools</a>
        <ul>
        <cfloop query="GetMenuHeadRet">
            <cfif GetMenuHeadRet.recordcount gt 0>
            <li style="background-color:#E6E6E6;">
                <cfoutput><a href="##">#Description#</a></cfoutput>
                <cfinvoke component="cfc.MainMenu"  method="GetMenuItem" returnvariable="GetMenuItemRet">
                    <cfinvokeargument name="menukey" value="#ID#"/>
                    <cfinvokeargument name="User_Id" value="#User_Id#"/>
                </cfinvoke>

                <ul>
                    <cfif GetMenuItemRet.recordcount gt 0>
                        <cfloop query="GetMenuItemRet">                                                 
                                <cfoutput><li><a title="#report_Desc#" onClick="Refresh();" href="#URL#?uid="#User_Id# target="_blank">#Report_Name#</a></li></cfoutput>
                        </cfloop>
                    </cfif>
                </ul>
            </li>
            </cfif>
        </cfloop>
      </ul>
    </li>
</ul>
</body>
</html>

Solution

You can use simple CSS3; just use two rules similar to these:

ul li:nth-child(2n) {
    background-color: #AA5555;
}

ul li:nth-child(2n+1) {
    background-color: #5555AA;
}

Here's an (ugly :P) example: http://jsfiddle.net/ryebmym7/1/