Controlling the position of submenus

The menu widget uses the position widget to control the destination of any submenus when visible. The default is to place the top left of the submenu to the right of the menu item that expands the submenu. But depending on the size of our menu, the depth of the submenus, and other constraints around size in our UI, we might want to use different defaults for the submenu positions.

Getting ready

We will use the following HTML structure for this submenu positioning demonstration:

<ul id="menu">
            <li><a href="#first">First Item</a></li>
            <li><a href="#second">Second Item</a></li>
            <li><a href="#third">Third Item</a></li>
            <li>
              <a href="#forth">Fourth Item</a>
              <ul>
                <li><a href="#fifth">Fifth</a></li>
                <li>
                  &lt...