SharePoint 2007 Design Tip: Changing the Flyout Menu Arrow Hover Color

This is small, but gets me all of the time.   When you are working with the Global Navigation (a.k.a. Top Nav Bar) in SharePoint and you are using 2 levels of flyout menus, the arrow that appears for the second level of items may show the wrong background color when you hover over the item or arrow.

As you start to alter the various colors and styles in the menu code, the background color behind the arrow does not reflect your changes or seem to pick up any styles from parent elements. Here is an example of this happening.

By default, the SharePoint menu code in the master page manually specifies a color for this hover effect:

<SharePoint:AspMenu ….. lots of properties….

You don’t have to replace the color or specify a style, just delete the property and your colors will shine through.

<SharePoint:AspMenu ….. lots of properties…..  >

This does require edits to the master page, there is no CSS class specified, so you can’t change this with CSS only.