This example shows how to implement a submenu showing an image and description hint. The top-level menu is implemented by a simple ASPxMenu. On the ItemMouseOver event, it shows a popup with another menu containing items that imitate subitem behavior. When you move the mouse over these items, an image to the right displays a corresponding picture and a hint popup also appears near this sub-menu.
All ASPxPopups use the PopupElementID property to set an ID of the anchor element. Then, they are displayed simply by calling the client-side Show method. Their position is determined by PopupVerticalAlign and PopupHorizontalAlign.
The submenu is bound to an XML file containing text, description, and image URL data. The submenu's item text is set according to the "text" attribute in an XML file. An image URL is also set automatically, but cleared in the ItemDataBound event in order not to show this image in the menu item. The description and image URL are passed to the client side using CustomJSProperties of the submenu. But first we need to fill a List with this data, because we don't know total items count to initialize the size of an array. Then, we convert this List to the array and set CustomJSProperties.
We also need to call setInterval to hide a hint in 4 seconds, because a menu item is its anchor and MouseOut CloseAction doesn't work automatically.
And finally we need to manually specify PopupElementID of the submenu popup, because it is contained outside of the first ASPxPopupControl.