How to make Page Menu buttons' color different from menu the bar?

Can someone help me with this please? Atahualpa let's you change the menu (page) color, but unfortunately it colors the whole bar that color as well under ATO/Header Area/Menu 1. Is there any way to make the menu buttons color different from the rest of the menu bar....say on the right?






Here is my html/css for the menu so far, what do I need to add to change it?

/* Menu Bars */


/* Adjustments for the menu bars, which in their default
state have 1px borders plus -1px margins to avoid 1+1=2px
borders between neighbor items. */
ul.rMenu-hor ul, ul.rMenu-hRight ul { margin-top: 0px; }
ul.rMenu-hor li { margin-bottom: 0px; margin-top: 0px; margin-left: 0px; }
ul.rMenu-hor { padding-left: 0px; }
ul.rMenu-ver li { margin-top: 0xp; }

div#menu1 ul.rMenu li a, div#menu2 ul.rMenu li a {
padding: 8px 10px;
}
/* different padding for parents with arrow image */
div#menu1 ul.rMenu li.rMenu-expand a, div#menu2 ul.rMenu li.rMenu-expand a {
padding: 8px 22px 8px 10px !important;
background-position: 97% 50% !important;
}
/* less padding for children with arrow image */
div#menu1 ul.rMenu li.rMenu-expand li a, div#menu2 ul.rMenu li.rMenu-expand li a {
padding: 5px 22px 5px 10px !important;
background-position: 97% 50% !important;
}

/* Space between items of page menu bar */
div#menu1 ul.rMenu li a {
margin-right: 0;
padding-right: 12px;
padding-left: 12px;
}

/*
ul#rmenu {
padding:5px;
}
*/
div#menu2 {
background: #666666;
}
div#menu1 {
background: #eee;
}