Change Submenu Colors

The menubar and the submenu are controlled differently. The "menubar" is the first layer of links -- your viewers will see it all the time. The "submenu" links are the items that pop-up when the mouse is placed over them. If you would like to customize the colors and border of the submenu use the following code. Add the following code to your theme's Advanced CSS settings:

Submenu Background Color

/* Set the default navbar submenu background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label {
  background: #008000;
}

Submenu Background Color on Hover

/* Set the navbar submenu hover background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover {
  background: #00F;
}

Submenu Border Color

/* Change the border color */
.yui3-menu .yui3-menu-children, 
.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-sublinks-separator .yui3-menu .yui3-menu-label {
   border-color: #000000;
}

Change the Menu Font

/* Change the navbar fonts */
.sm-page-widget-nav-toplink, .yui3-menu-item .yui3-menu-label,
.sm-page-widget-nav-toplink > a {
  font-family: 'Courier' !important;
  font-size: 10px !important;
  color: yellow !important;
}

You may need to combine this with the code to Use Additional Google Fonts so that you can load the font of your choice. See the original discussion on the dgrin forums.