jquery menu inside dialog not showing sub menus

Question

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?

Answer 1

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

Answer 2

Add a class to all the submenu's

Then, on click of each of these submenu's resize the dialog box to the desired width

http://jsfiddle.net/VPXjs/19/

Also, here's the sample code:

  <li class='submenu'><a href="#">Ada</a></li>
  <li class='submenu'><a href="#">Adamsville</a></li>
  <li class='submenu'><a href="#">Addyston</a></li>
  <li class='submenu'>

$('.submenu').click(function() {
    $('#dlg').dialog('option','width',460);
});