JQuery ui menu not positioned correctly

Here is my jsfiddle.

http://jsfiddle.net/jgreen/K6QSd/2/

The menu doesn't look like my positioning.

.menu({
    position: {
        my: "right top",
        at: "right bottom",
        of: $('#button1'),
        collision: "none"
    }
})

      

I am trying to get the menu to line up on the right side of the button, not the left side it does now.

Thanks in advance.

Edit: snowp provided a way to get the behavior with css, but I'm really looking for why it doesn't work with jquery ui.

Edit # 2: I haven't fully analyzed the critical part of the documentation. Option position 'Specifies the position of the submenu ...'. submenu! = menu. Doh.

+3


source to share


2 answers


@jgreen Jquery Solution for your required menu



 $(this).next().show().menu().position({

            my: "right top",
            at: "right bottom",
            of: $('#button1'),
            collision: "none" 
})

      

+2


source


add following css For this menu Click here

  #subMenu
    {
        float:right; top:0px;right:-80px;
        z-index:1;
    }

      

(or)



add following css For this menu Click here

#subMenu
{
   float:right; top:32px;right:40px;
}

      

+1


source







All Articles