there are several parts to the menu bar:
the background
the menu item's background
the menu items
the current menu item
whether it is active, visited, hovered, then all these things apply to each level of a submenu. There is a lot of CSS dealing with menu's.
But you can change things. All this CSS goes in ATO->add HTML/CSS Inserts->CSS Inserts.
to change the background use this
HTML Code:
/* ================================================== */
/* L0 - menu background */
/* ================================================== */
div#menu1 {
height: 40px;
margin-top:0px;
background: blue;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */
Next to change the Menu item's background use
HTML Code:
/* ================================================ */
/* L1 - Menu item's background and border */
/* ================================================ */
div#menu1 ul.rMenu {
background: red;
border: none 0px;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */
and to change the menu items themselves use
HTML Code:
/* ================================================== */
/* L2 - Menu item */
/* ================================================== */
ul.rMenu li a:link,
ul.rMenu li a:active,
ul.rMenu li a:hover,
ul.rMenu li a:visited,
ul.rMenu li {
background: yellow !important;
color: #000000 !important;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */
if you want the menu item for the current page to be different use
HTML Code:
/* ================================================== */
/* L3 - current menu item */
/* ================================================== */
ul.rMenu li.current_page_item a:link,
ul.rMenu li.current_page_item a:active,
ul.rMenu li.current_page_item a:hover,
ul.rMenu li.current_page_item a:visited,
ul.rMenu li a:hover
ul.rMenu li {
background: black !important;
color: #white !important;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++ */
You can delve deeper if you need. I hope this helps