Infragistics WebDataMenu comes with variety of styles and lets you specify your own. At a very basic it allows you to specify styles for normal menu items and hovered menu items:

<ig:WebDataMenu ID="xwdmMyMenu" runat="server">
   <ItemSettings CssClass="MenuItem" HoverCssClass="MenuItemHover"/>
</ig:WebDataMenu>

This markup can correspond to CSS classes, for example:

.MenuItem {
   background-image:none;
   background-color:white;
}

.MenuItemHover{
   background-color:rgb(213,224,198);
}

This works fine in most cases, but since the hover/unhover is done via JavaScript sometimes there’re issues.

One particular issue I encountered – if this is a context menu, on “showAt” call the first item is always hovered – which can be pretty annoying. There’re other issues as well, so instead of diggin’ dip into JavaScript, trying to overwrite some default behaviors I decided to keep it simple and let CSS do its thing.

If we modify the above HTML markup by removing hovered CSS class property completely:

<ig:WebDataMenu ID="xwdmMyMenu" runat="server">
   <ItemSettings CssClass="MenuItem" />
</ig:WebDataMenu>

And replace hover class in CSS definitions with pseudo-class:

.MenuItem {
   background-image:none;
   background-color:white;
}

.MenuItem:hover{
   background-color:rgb(213,224,198);
}

We will achieve the same hover effect without nasty side-effects.