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.


9 thoughts on “SharePoint 2007 Design Tip: Changing the Flyout Menu Arrow Hover Color”

  1. Actually, if you wanted to use just CSS you could use the{background-color:#FFCC00 !important;color:#000000;}Simply use the “!important” tag and the background color will be forced behind the arrow. But… Since you are already creating a custom master page to set the MaximumDynamicDisplayLevels you now have 2 options.

  2. Heather, I am having a tough time getting the dynamic flyouts in the quick launch bar to have their background transparent so I can see through the the underlying text in the main content area. I have tried various CSS modifications to allow opacity and the “filter” opacity. Nothing seems to work. Is there a definition somewhere in the JS that controls the flyout that is setting the background to not allow transparency?

  3. Hi ThereI’m trying to change the black arrow image that is displayed in the menu mentioned here. any idea where I can find it / what css is applied to it?When you click on the image – it is show as webresource.gif, but I can find no such image, nor reference in the css for it. Any ideas?thanks for all the great info!Janine

  4. Janine,I’m having the same issue as you. I have made a white arrow graphic, now I don’t know where to put it.Paul

  5. Janine,In case you never found this information: I found how to replace the image. It is scripted in in the <asp:menu> tag. The attributes that control it are StaticEnableDefaultPopOutImage or DynamicEnableDefaultPopOutImage and StaticPopOutImageUrl or DynamicPopOutImageUrl.Frameworks sometimes seem like nothing but secret handshakes. I guess that’s how their creators make so much money in training.Paul

  6. Great tip…One thing heather. Once i click on the submenu item and view the site. the top navigation does not show me the sub menus again. am i missing something?TIA

  7. @Bryan Yamanaka:I’m having this problem too! When you look at the source (not your master page, but what you get when you do a view source on your page in IE) you’ll see this line in the head:.zz1_GlobalNav_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }It’s an inline style, spat out by the ASP.NET control straight into the master page! Grrrr! An inline style!I’ve tried to override this inline style by putting this into the master page between </head> and <body><style type=”text/css”>.zz1_GlobalNav_0 { background-color: transparent; !important }</style> which works fine for Firefox, but doesn’t work at all in IE. If you set the background-color to say, red, it’ll show red in IE. Why does IE not override the background color with transparent if a color has already been set? Shame on you twice, Microsoft! Once for making SharePoint spit out an inline style straight into the master page, and secondly for IE not handling the CSS override properly.

  8. @Bryan Yamanaka:It appears that the SharePoint:AspMenu control squirts out the css directly into the page!.zz1_GlobalNav_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }I’ve tried to override it by placing .zz1_GlobalNav_0 { background-color: transparent !important; }into the master page between the close head tag and the body tag, but only Firefox picks this up and shows a nice transparent menu. It seems IE cannot override the background to be transparent if something has set a background color before it. Grrr!See for discussion.I guess I’ll have to look at those CSS friendly ASP.NET controls after all.

Comments are closed.