jquery-ui dropdown menu style

Question

i am using jquery-ui 1.9.2 version which has a new menu option in there. Is there any way that i can change the menu style to be a drop-down just like http://onehackoranother.com/projects/jquery/droppy/#

I referred to http://wiki.jqueryui.com/w/page/12137997/Menu ,but those are plug-ins.

I do not want to use another plugin for this, i want to alter the same jquery-ui itself, is there any way to do this?

Answer 1

You can use the position option to accomplish this. I'll whip up and add a fiddle with the details when I'm less busy, but the gist is:

$('#menu').menu({
    position: { my: 'left top', at: 'left bottom' }
});

Essentially that is telling jQuery UI to put the sub menu's top-left corner (my: 'left top') on the bottom-left corner of the parent element (at: 'left bottom').

You'll probably need to fiddle with the jquery.ui.menu.css file to get it exactly right. I actually ignore that CSS altogether most of the time.