Hi All

I managed to write my own solution for this by handling a couple of client side events and hacking into some functions which are probably internal and not supposed to be used.  This works for us, we are using 13.1.20131.2188.  No idea whether it will work for other versions and I guess it may stop working if they change any of these undocumented functions.

Menu Definition:

    <ig:WebDataMenu ID="menu" runat="server" GroupSettings-Orientation="Horizontal" ActivateOnHover="False" StyleSetName="SecondLevelMenu">
        <AutoPostBackFlags ItemSelected="On" />
        <GroupSettings EnableAnimation="true" AnimationType="ExpandAnimation" AnimationDuration="70" AnimationEquationType="Linear" />
        <ClientEvents ItemHovered="menu_ItemHovered" ItemUnhovered="menu_ItemUnhovered" />
    </ig:WebDataMenu>

NOTES

1. you must set ActivateOnHover to FALSE as there are problems with this and the styling is not applied correctly (in my opinion, yet to be confirmed by support)
2. handle the two ClientEvents as shown

Javascript Code:

        var hoverCheck;
        var hoveredItem;

        function menu_ItemHovered(sender, eventArgs) {
            if (hoveredItem == eventArgs.getItem()) { clearTimeout(hoverCheck); }  //If they hover back to the parent - stop checking timer
            if (eventArgs.getItem().hasChildren()) {
                eventArgs.getItem().open();   //if this item has children, open the drop down
            }
        }

        function menu_ItemUnhovered(sender, eventArgs)
        {
            if (eventArgs.getItem().hasChildren()) {
                hoveredItem = eventArgs.getItem();
                hoverCheck = setTimeout(function () { CheckHover(eventArgs.getItem(), sender) }, 30);  //timer to check whether they are still hovering over a child
            }
        }

        function CheckHover(parent, menu) {
            var stillHovering = false;
            for (i = 0; i < parent.getChildrenCount() ; i++) {
                if(parent.get_childItem(i)._element.className.indexOf("Hover") > 0) {
                    stillHovering = true;
                }
            }
            if(stillHovering) {
                //keep checking in case they hover away from this sub item not via the parent item
                hoverCheck = setTimeout(function () { CheckHover(parent, menu) }, 30);
            } else {
                //they've finished hovering, this closes the dropdown
                menu.__hideItem(parent);
            }
        }

Hope this helps.

Marcus

Is there any solution for this??

In the CSOM for WebDataMenu there is an "open()" method on DataMenuItem class but there does not appear to be any equivalent close method.  How are we supposed to close a submenu once we've opened it in javascript?  - eg. in the ItemUnhovered client side event.

Using ActivateOnHover=True causes incorrect styling of the menu items (for which I've raised a support request) so we are trying to get around this by handling the open/close of the sub-menus in javascript.

Thanks

No. The issue is not resolved and your example is not appropriate to what I was asking.

If you create a menu with several levels of children and then click on an item that is not the lowest child level then I want a way to "close" then entire menu from javascript in the item clicked method.]]

Gary