jquery-mobile - 原点から水平方向にシフトして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 ソリューションがあるかどうかを尋ねています。

「偽の原点」として機能する垂直ボタンの近くに width=200% の非表示の div も試しました。例を次に示します。

プランカー: https://plnkr.co/edit/qmGhNqgww2mkKX1QywLH?p=preview

ただし、ポップアップの位置はその中心に対して相対的であるため、サブメニュー内のアイテムの数を常に知る必要があります。

原点からのパーセンテージで特定のオフセットでJQMポップアップを配置できるかどうか誰かが知っていますか?