UberMenu implements all of the standard current menu item classes, so you can target and adjust those properties via custom CSS . You can inspect the top level list items for each page using Firebug to see what is available to you at any given time.
Based on menu hierarchy
These are the standard class options available based on the menu hierarchy:
.current-menu-item .current-menu-parent .current-menu-ancestor
Current Menu Item
To highlight the current menu item red (regardless of level), you could use this style, for example:
#megaMenu ul.megaMenu li.menu-item.current-menu-item > a,
#megaMenu ul.megaMenu li.menu-item.current-menu-item > span.um-anchoremulator{
color:red;
background-color:blue;
}
Depending on where you put your code, you may need to employ the !important flag.
Ancestor of current menu item
To highlight the top level item when either that item or a submenu item is selected, use
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-item-depth-0.current-menu-item > a,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-item-depth-0.current-menu-item > span.um-anchoremulator,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-item-depth-0.current-menu-parent > a,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-item-depth-0.current-menu-parent > span.um-anchoremulator,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-item-depth-0.current-menu-ancestor > a,
#megaMenu ul.megaMenu li.menu-item.ss-nav-menu-item-depth-0.current-menu-ancestor > span.um-anchoremulator{
color: red;
background-color:blue;
}
Based on Page Hierarchy
These are the classes available, and would be used in the same way as above:
.current-page-parent .current-page-ancestor
For example:
#megaMenu ul.megaMenu li.menu-item.current-page-ancestor > a,
#megaMenu ul.megaMenu li.menu-item.current-page-ancestor > span.um-anchoremulator{
color:red;
background-color:blue;
}
The same structure works with other hierarchical custom post types, e.g. `current-{custom-post-type}-ancestor`.