Try giving the menu items you want on the right float: right via JSX styling or a CSS class.
Example pulling the Navigation Three item to the right with JSX inline styling, style={{float: 'right'}}:
<SubMenu style={{float: 'right'}} title={<span><Icon type="setting" />Navigation Three - Submenu</span>}>
<MenuItemGroup title="Item 1">
<Menu.Item key="setting:1">Option 1</Menu.Item>
<Menu.Item key="setting:2">Option 2</Menu.Item>
</MenuItemGroup>
<MenuItemGroup title="Item 2">
<Menu.Item key="setting:3">Option 3</Menu.Item>
<Menu.Item key="setting:4">Option 4</Menu.Item>
</MenuItemGroup>
</SubMenu>
UPDATE: (for Firefox):
If you have right and left menu elements, you need to add
style={{float: 'right'}} to the right MenuItem‘s and
style={{float: 'left'}} to the left ones.
Leaving out the latter will cause some browsers (Firefox) to render the underlying <li> tags with a break between them.