Here is my handy little cheat sheet for dealing with the two menu's and the parts. Put this at the end of your css and you can see graphically, what effects what. It should be enough to get you going.
HTML Code:
/* ================================================ */
/* Page menu background */
/* ================================================ */
div#menu1 {
height: 40px;
margin-top:0px;
background: #blue;
}
/* ================================================ */
/* Page Menu item's background and border */
/* ================================================ */
div#menu1 ul.rMenu {
background: #red;
border: none 0px;
}
/* ================================================ */
/* Page Menu item */
/* ================================================ */
ul.rMenu li a:link,
ul.rMenu li a:hover,
ul.rMenu li a:active,
ul.rMenu li a:visited,
ul.rMenu li {
background: #yellow !important;
color: #000000 !important;
}
/* ================================================ */
/* Category menu background */
/* ================================================ */
div#menu2 {
height: 40px;
margin-top:0px;
background: #green;
}
/* ================================================ */
/* Category Menu item's background and border */
/* ================================================ */
div#menu2 ul.rMenu {
background: #orange;
border: none 0px;
}
/* ================================================== */
/* Category Menu item */
/* ================================================== */
#menu2 ul.rMenu li a:link,
#menu2 ul.rMenu li a:hover,
#menu2 ul.rMenu li a:active,
#menu2 ul.rMenu li a:visited,
#menu2 ul.rMenu li {
background: #purple !important;
color: #000000 !important;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */