Different backgrounds for menubar Spry UI 1.7

Question

All the q/a I've found refer to previous versions of MenuBar, not the newest 2.0 MenuBar that's in Spry UI 1.7 / DW CS5.
I want to use different background images for each of the top level MenuBars. I've found the place in the CSS,
#MenuBar .MenuItem {
    background-image: url(blue.jpg);
Works fine for one -- and unfortunately all.  Now I want the adjacent bar to be red, the next to be yellow, etc.
So how do I pass a unique identifier in each <li> in the source code -- when it looks like the JavaScript renames all the <li>'s to "MenuItem"?
I've tried ids, classes, and names --
<li class="red"> in the source code, and
#MenuBar .MenuItem .red {
    background-image: url(red.jpg);
or
<li id="red"> in the source code, and
#MenuBar .MenuItem #red {
    background-image: url(red.jpg);
for example. No success.
This should be easy, I would think.  Advice?

Answer 1

I'm using the MenuBar that's in Spry-UI-1.7.  They call it MenuBar_2 in their menubar.css.  Says at the top:"
/* BeginOAWidget_Instance_2141544: #MenuBar_2 */
/* Settable values for skinning a Basic menu via presets. If presets are not sufficient, most skinning should be done in
    these rules, with the exception of the images used for down or right pointing arrows, which are in the file SpryMenuBasic.css
     These assume the following widget classes for menu layout (set in a preset)
    .MenuBar - Applies to all menubars - default is horizontal bar, all submenus are vertical - 2nd level subs and beyond are pull-right.
    .MenuBarVertical - vertical main bar; all submenus are pull-right."
Says "/* SpryMenuBasic.css - version 0.5 - Spry Pre-Release 1.7 */" in that file.
At any rate, my Web site isn't posted anywhere yet, it's still local.  My question is simply, given the menubar widget I'm using, what's the right syntax to use to identify different <li>'s under <ul id="MenuBar">, such that I can specify the images I want in different "#MenuBar .MenuItem xxx" lines in menubar.css? 
Perusing SpryMenu.js, it would seem this section looks like it could be relevant:
Spry.Widget.MenuBar2.prototype.transformMarkup = function()
    var evt = new Spry.Widget.Event(this);
    this.notifyObservers("onPreTransformMarkup", evt);
    if (!evt.performDefaultAction)
        return;
    // Find the <a> elements and convert them to MenuItems.
    var eles = Spry.$$("a", this.element);
    for (var i = 0; i < eles.length; i++)
        var a = eles[i];
        var ca = this.extractChildNodes(a);
        this.createOptionalSlicedStructure(a, "span", this.menuItemClass);
        var label = this.createOptionalSlicedStructure(null, "span", this.menuItemLabelClass);
        this.appendChildNodes(label.contentContainer, ca);
        a.contentContainer.appendChild(label);
    // Add MenuItemContainer class to all <li> elements.
    var eles = Spry.$$("li", this.element);
    for (var i = 0; i < eles.length; i++)
        this.addClassName(eles[i], this.menuItemContainerClass);
    // Find all <ul> elements and convert them to SubMenus.
    var eles = Spry.$$("ul", this.element);
    for (var i = 0; i < eles.length; i++)
        var ul = eles[i];
        this.addClassName(ul, this.subMenuViewClass);
        var sm = this.createOptionalSlicedStructure(null, "div", this.subMenuClass);
        ul.parentNode.insertBefore(sm, ul);
        sm.contentContainer.appendChild(ul);
        var mi = this.getMenuItemForSubMenu(sm);
        if (mi)
            this.addClassName(mi, this.menuItemWithSubMenuClass);
        if (this.insertSubMenuBreak)
            var br = document.createElement("br");
            this.addClassName(br, this.subMenuBreakClass);
            sm.contentContainer.appendChild(br);
    // Mark each submenu with a class that indicates its level.
    var sms = Spry.$$("." + this.subMenuClass, this.element);
    var r = this.element;
    for (var i = 0; i < sms.length; i++)
        var e = sms[i].parentNode;
        var level = 1;
        while (e && e != r)
            if (this.hasClassName(e, this.subMenuClass))
                level++;
            e = e.parentNode;
        this.addClassName(sms[i], this.menuLevelClassPrefix + level);
    // Wrap the original menubar <ul> with a <div>.
    var root = this.createOptionalSlicedStructure(null, "div", this.widgetClass);
    var oldRoot = this.element;
    oldRoot.parentNode.insertBefore(root, oldRoot);
    root.contentContainer.appendChild(oldRoot);
    this.addClassName(oldRoot, this.menuBarViewClass);
    this.element = root;
    if (this.insertMenuBarBreak)
        var br = document.createElement("br");
        this.addClassName(br, this.menuBarBreakClass);
        root.contentContainer.appendChild(br);
    // Add a class to the first and last menu item in the MenuBar and its submenus.
    var eles = Spry.$$("." + this.menuBarViewClass + ", ." + this.subMenuViewClass, this.element);
    for (var i = 0; i < eles.length; i++)
        var containers = this.getElementChildren(eles[i]);
        if (containers.length)
            this.addClassName(this.getElementChildren(containers[0])[0], this.menuItemFirstClass);
            this.addClassName(this.getElementChildren(containers[containers.length - 1])[0], this.menuItemLastClass);
    if (this.widgetID)
        if (oldRoot.id == this.widgetID)
            oldRoot.id = "";
        root.id = this.widgetID;
    this.notifyObservers("onPostTransformMarkup", evt);