Create a link group hierarchy structure
View the related article on creating a link group. Make sure to turn on the Generate Markup for Dropdown Menu option. Optinally, you can set the maximum levels to nest the links using the Max Dropdown Levels option. 1 or 2, at most, is the recommended limit. To create the nested order desired, be sure and choose the Parent Group option from the drop down list. The end result should look similar to this:
Create the widget
In the sidebar or area you want the fly-out menu to appear, place a Menu Widget. Select your newly created menu and set the orientation to vertical.
Add the styles
While in the LinkGroup Widgit editor, add the following CSS to the styles tab. This is a sample set of CSS and should be used as a guide to creating your own CSS to match your theme.
CSS:
/* Style for the Div containing the Parent Links */
.LinkGroup .ControlLink { background:#666; color:#fff; padding:10px; z-index: 10; position: relative; }
/* the top level link itself */
.LinkGroup .ControlLink_Link { color:#fff; }
/* Hover color for top level link */
.LinkGroup .ControlLink:hover,
.LinkGroup .ControlLinkHover,
.LinkGroup .ControlLink:hover > a,
.LinkGroup .ControlLinkHover > a { color: #000; background: #ccc; text-decoration: none; z-index:11; }
/* This would apply to just the first level submenu */
.ControlLink > .SubMenu { }
/* Styling for the submenu links */
.ControlLink .SubMenuItem a { display: block; padding: 10px; min-width: 150px; color: #000; }
.ControlLink .SubMenuItem a:hover, .ControlLink .SubMenuItem:hover > a, .ControlLink .SubMenuItemHover > a { background: #666; color: #fff; }
/* Positioning for the Submenus (2 levels) */
.ControlLink .SubMenu { position: absolute; left: -9999px; top: 0; background: #ccc; z-index: 100; }
.ControlLink:hover .SubMenu .SubMenu, .ControlLinkHover .SubMenu .SubMenu { left: -9999px; }
.ControlLink:hover .SubMenu, .ControlLinkHover .SubMenu { left: 100%; }
.ControlLink .SubMenuItem { position: relative; z-index: 11; }
.ControlLink .SubMenuItem:hover .SubMenu, .ControlLink .SubMenuItemHover .SubMenu { left: 100% !important; top: 0; }
Finished Product
After you save your changes, refresh the page. The flyout menu should look similar to this: