Меню jquery внутри диалога не показывает подменю

Question

У меня есть меню jquery, с подменю, внутри диалога jquery, как это.

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

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

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

Моя проблема в том, что когда я открываю подменю, оно скрывается внутри div и появляются полосы прокрутки. Я хотел бы, чтобы подменю перекрывало диалог. Я попытался установить z-index, но безрезультатно (с позицией: абсолютный)

Этот вопрос похож, но не имеет принятого ответа.

Проблема: Меню UL всегда стоит за диалогом jquery

Есть идеи?

Answer 1

Все, что вам нужно сделать, это добавить overflow: visible в .ui-dialog класс и удалить переполнение из .ui-dialog .ui-dialog-content,

.ui-dialog {
    overflow: visible
}

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

Обновленный пример

Answer 2

Добавить класс во все подменю

Затем по щелчку каждого из этих подменю изменить размер диалогового окна до желаемой ширины.

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

Кроме того, вот пример кода:

  <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);
});