jquerycssjquery-ui-dialogjquery-ui-menu

jquery menu inside dialog not showing sub menus

I have a jquery menu, with sub menus, inside of a jquery dialog like this.

http://jsfiddle.net/pnmpn25/VPXjs/17/

$("#menu").menu();

$("#dlg").dialog();

My problem is that when I open a sub menu, it gets hidden inside of the div and scroll bars appear. What I would like to happen is that the sub menu overlaps the dialog. I've tried setting z-index, to no avail (with position:absolute)

This question is similar, but has no accepted answer.

Problem: Menu UL is always behind jquery dialog

Any ideas?

Solution

  • All you need to do is add overflow: visible to .ui-dialog class and remove overflow from .ui-dialog .ui-dialog-content.

    .ui-dialog {
    overflow: visible
}

.ui-dialog .ui-dialog-content {
    overflow: inherit;
}

    Updated example