How to reposition submenu in jquery ui menu?

Question

I need my menu to appear like below :

| Menu 1 | -> | Sub menu of menu 1 - 1 |
| Menu 2 |    | Sub menu of menu 1 - 2 |
| Menu 3 |    | Sub menu of menu 1 - 3 |

| Menu 1 |    | Sub menu of menu 2 - 1 |
| Menu 2 | -> | Sub menu of menu 2 - 2 |
| Menu 3 |    | Sub menu of menu 2 - 3 |

| Menu 1 |    | Sub menu of menu 2 - 1 |    | Sub menu of menu 2 - 2 - 1 |
| Menu 2 | -> | Sub menu of menu 2 - 2 | -> | Sub menu of menu 2 - 2 - 2 |
| Menu 3 |    | Sub menu of menu 2 - 3 |    | Sub menu of menu 2 - 2 - 3 |

I'm using the below position() option of jquery-ui's menu widget but doesn't seem to achieve what I want.

$( "#menu" ).menu({position: { my: "left top", at: "right top" , collision: "flip " } });

Also I'm not sure how to use

$( ".selector" ).menu( "option", "position", { my: "left top", at: "right-5 top+5" } );

(Above line taken from http://api.jqueryui.com/menu/#option-position)

What is not working for me : http://jsfiddle.net/R4Y2E/1/show/

What I'm trying to achieve : http://jsfiddle.net/2zA6A/4/show/ (slightly move away from the links on the li to see that the submenu repositions to the top of the parent menu)

Any help or suggestion as to how to use this method ?

Answer 1

I figured out to reposition the submenu using focus & select events (as below) : http://jsfiddle.net/2zA6A/6/

$(function() {

var menuBar;
    menuBar = $("#menu");

    menuBar.menu(
        {
            focus: function (event, ui) {
                 menuBar.menu("option", "position", { of: $(ui.item.parent()), my: "left top", at: "right top" });
            }
        }
    )

});