A nice feature of new the JQuery style menus is that menu items can be individually styled.
Below is an example of changing the color of a menu item in the unselected state as well as the "hover" state (when the mouse appears over the menu). We want to draw attention to "Customer Resources" menu item in this example when people visit our website.
To achieve this, we can use a custom CSS style. The top level menu buttons (from left to right) have the classes m00, m01, m02, m03 etc. Therefore the fifth menu item from the left will be associated with the class m04.
To customize CSS behaviours, use System Setup / Preference / Appearance and show the advanced settings.
Toward the bottom of the screen, enter custom CSS as shown below:
The code above replaces the normal background color for the menu item with #52B749 (green) and over-rides the hover property with a burnt orange color (#FF9900)
Users with CSS knowledge will appreciate that they can apply many other CSS stylings as well.
Styling the side menus is done in the same way except that the class selectors will start with "s" (for side menu) instead of "m" designated the top menu. For example, to stylize the third side panel menu item, use the class selector "ul#sidenav a.s04"