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

Question

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

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

.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. */
}

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

РЕДАКТИРОВАТЬ: Это возможная реализация 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 с определенным смещением в процентах от начала координат?