OBSOLETE - ASPxMenu - How to show a sub menu with a full page width

UPDATED:

Starting with version 14.2, ASPxMenu provides the built-in capability to display a submenu with the full page width. This allows accomplishing a similar task with less effort and does not require as much extra code. See the ASP.NET - Create Full-width Submenu post to learn more about this new functionality.

You can try this functionality in the Full-Width Submenu online demo.

You can implement a submenu with a full page width in the following manner:
1) Assign the following CSS class to the SubMenuStyle.CssClass property: 

[CSS]
.subMenu{width:100%;box-sizing:border-box;}.subMenu>div{margin:0auto;}

2) Handle the client-side PopUp event to adjust a sub menu:

[JScript]
function OnPopup(menu, e){var el = menu.GetMenuElement(e.item.indexPath);
            el.style.left = 0;
            el.style.right = 0;
            el.style.width = '100%';} 

The example below demonstrates this approach in action.