How to position a jQuery Mobile popup with some horizontal shift from the origin?

Question

I'm using a JQM popup as a horizontal sub-menu, like in the image below. By clicking the first vertical button, the sub-menu will open.

The size of the menu buttons is not fixed but is set as a percentage, as this buttons are, let say, adaptive to the viewport height (like in the JQM Demo for responsive Listviews):

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

Now, i have some trouble to position the popup with some left margin to the right side of my main vertical menu, because as default, the popup will overlap with the origin.

EDIT: This is a Javascript possible implementation:

$("#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;
    }
});

but i'm askng if there is a CSS solution using the markup data-position.

I tried also with a hidden div with width=200% near the vertical button that should act as a "fake origin", here is the example:

Plunker: https://plnkr.co/edit/qmGhNqgww2mkKX1QywLH?p=preview

but, the position of the popup is relative to its center, so i would need always to know the number of items inside the sub menu.

Someone knows if is possible to position a JQM popup with a certain offset in percentage from the origin?