How to control dojo widget classes, or how to get fine-grained control of style

Question

I am creating a UI with dojo that is emulting some aspects of an existing thick client application. I need to programatically put two different menu bars on the same page. I have successfully created the two menu bars using

new dijit.Menu();
new dijit.MenuItem();

and so on. Now I want to give them slightly different presentation styles. As I'm going to have quite a few pages of this sort my first thought is to use different CSS style classes. And that's the problem: when I create the Menu and it's items we get quite a set of HTML objects, each with CSS classes specified by dojo, and the classes are the same for the items associated with either menu. How can I best get specific control for any one menu?

I could determine the dojo-generated ids for each item, and specify styles by ids, but that seems like hard work. Is there an sensible way to control the classes defined by dojo, or a nice CSS way to select only the items associated with one menu bar?

Answer 1

Depending on the names of your menu bar try

menubar1 ul
{styles here}

menubar1 li
{styles here}

menubar2 ul
{styles here}

menubar2 li
{styles here}

Simplest way I can think of to select the different elements of the two menus.

Answer 2

This is the code I used according to Kyle's suggestion (there's a few syntactic differences).

I'm basing my code on the "baf/obe" examples in "Mastering Dojo" by Gill et al.

var actionDef =  {
         id : "myactions",  /* well-defined id, to be used in css */
         commandItems: /* etc. as per Gill*/
                  })
} 

main.actions= new edf.dijit.MenuBand(actionDef);  /* constructs hierarchy of menu
                                                     and component items*/

with similar code for the other menu bar.

Now a css entry for one of the lower level menu components

#myactions .dijitButtonText {
text-align: center;
padding: 0 0 0 0;
background-color: #dd8000;
font-size: 18px; 
font-weight: bold;

}

Where .dijitButtonText is a class defined by dojo and applies to the menu item labels.

This mixing of a "#id" and ".class" selectors was the piece that I didn't see in any of the CSS selector references I found online.