Как расположить всплывающее окно jQuery Mobile с некоторым горизонтальным сдвигом от начала координат?

Я использую всплывающее окно JQM в качестве горизонтального подменю, как на изображении ниже. При нажатии на первую вертикальную кнопку откроется подменю.

Размер кнопок меню не фиксирован, а задается в процентах, так как эти кнопки, скажем, адаптируются к высоте области просмотра (как в JQM Demo для адаптивных списков):

.menu .ui-listview li > .ui-btn {
    box-sizing: border-box; /* include padding and border in height so we can set it to 100% */
    border-color: rgb(102,102,102);
    border-width: 1px;
    height: 100%;
    min-height: 32px;
    padding: 0; /* To make it small. */
}

Теперь у меня возникли проблемы с размещением всплывающего окна с некоторым левым полем справа от моего основного вертикального меню, потому что по умолчанию всплывающее окно будет перекрываться с источником.

EDIT: Это возможная реализация Javascript:

$("#left-sub-menu").on({
    popupbeforeposition: function(e, ui) {
        var px = $("#left-menu").outerWidth()           // left margin
                 + $(this).parent().outerWidth() / 2    // center of popup container
                 + 10;  // if left arrow, add default half arrow width  
        ui.x = px;
    }
});

но я спрашиваю, есть ли решение CSS, использующее положение данных разметки.

Я также пробовал со скрытым div шириной = 200% рядом с вертикальной кнопкой, которая должна действовать как «фальшивое происхождение», вот пример:

Планкер: https://plnkr.co/edit/qmGhNqgww2mkKX1QywLH?p=preview

но положение всплывающего окна относительно его центра, поэтому мне всегда нужно знать количество элементов внутри подменю.

Кто-нибудь знает, можно ли разместить всплывающее окно JQM с определенным смещением в процентах от источника?