Infragistics WebDataMenu ASP.NET control comes both with predefined stylesets and allows you granularly overwrite any of the styles. For example definition like this

<ig:WebDataMenu ID="xmyMenu" runat="server" StyleSetName="Office2007Blue"
                 CssClass ="topMenuStyle" >
   <GroupSettings Orientation="Horizontal" />
   <ItemSettings CssClass="itemCssStyle" 
                 HoverCssClass="hoverCssStyle" 
                 SelectedCssClass="selectedCssStyle" />  
</ig:WebDataMenu>

will create a horizontal dropdown menu in default “Office 2007 Blue” styleset but allows you to overwrite individual styles via exposed CSS properties.

Let’s take a look at hover style. After somewhat painful research I found that in order for it to work correctly for both root and submenu levels – you have to apply it to specific DOM elements rendered by menu control:

div.topMenuStyle > div > ul > li.hoverCssStyle {
  /* this hover style will apply to top level menu */
}

div.topMenuStyle > div > div > div ul > li.hoverCssStyle {
  /* this hover style will apply to submenus */
}

This works fine, but I noticed one major annoyance: when I hover over menu item – it briefly flashes orange background before switching to correct color defined by “hoverCssStyle” class. After doing some digging I realized that in addition to styles for “item”, “hover” and “selected” – grid also uses “active” style – this is what caused brief display of unexpected color or, more precisely in horizontal menu that uses “Office2007Blue” it’s:

• .igdm_Office2007BlueMenuItemHorizontalRootActive – “active” style for top level menu
• .igdm_Office2007BlueMenuItemVerticalActive – “active” style for dropdown items.

Your mileage may vary (you may have a vertical menu or use different styleset), but that’s the gist of it – there’re “active” classes that affect grid hover appearance. Unfortunately grid doesn’t expose these as property of the grid to allow you to overwrite them, like it does with “hover” and “selected” styles. Fortunately there’s an easy workaround – all you have to do is redefine these classes in your own stylesheet. In my case I wanted them to be exactly like hover ones, so I simple added them to the original CSS definitions:

div.topMenuStyle > div > ul > li.hoverCssStyle,
.igdm_Office2007BlueMenuItemHorizontalRootActive {
  /* this hover style will apply to top level menu */
}

div.topMenuStyle > div > div > div ul > li.hoverCssStyle,
.igdm_Office2007BlueMenuItemVerticalActive {
  /* this hover style will apply to submenus */
}

Bingo. No more orange flashes, just nice and stylish hover effect.