如何定位jQuery Mobile弹出窗口与原点的一些水平移位？

Question

我使用JQM弹出窗口作为水平子菜单，如下图所示。通过单击第一个垂直按钮，子菜单将打开。

菜单按钮的大小不是固定的，而是设置为百分比，因为这些按钮可以自适应视口高度（就像JQM演示中的响应式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. */
}

现在，我将弹出窗口的左边距放置在主垂直菜单的右侧有一些麻烦，因为默认情况下，弹出窗口会与原点重叠。

修改 这是一个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％靠近垂直按钮，它应该充当＆＃34;伪造的原点＆＃34;，这里是示例：

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

但是，弹出窗口的位置是相对于它的中心，所以我需要总是知道子菜单中的项目数。

有人知道是否可以定位一个JQM弹出窗口，该弹出窗口具有与原点相比的特定偏移量？