jQuery UI Menu在Frames中被截断的技术问题求助

我正在协助企业维护一款基于Frames的老旧Web应用，需要在顶部Frame（布局中标注为x的区域）添加jQuery UI Menu。此前能让jQuery UI Dialog显示在所有Frames上方的逻辑，套用到Menu上完全无效——Menu依然会被Frame截断。

布局示意 #

------------
|    f    x|
------------
|  |       |
|  |   f   |
| f|--------
|  |       |
|  |   f   |
------------

代码逻辑问题 #

当前代码中，每个子窗口的window对象都定义了showUserMenu()方法，但根窗口window.top并没有这个方法。这导致递归调用根窗口方法的逻辑无法执行：if判断的前半部分rootWindow !== window.self是成立的，但后半部分rootWindow.showUserMenu不满足，最终只能执行当前窗口内的Menu显示逻辑。我无法理解为什么同样的逻辑对Dialog有效，对Menu却行不通。

相关代码 #

(function () {
    window.showUserMenu = function () {
        var rootWindow = window.top;
        if ((rootWindow !== window.self) && rootWindow.showUserMenu) {
            return rootWindow.showUserMenu();
        }
        else {
            $('#userMenu').show().position({ my: "right center", at: "right center", of: "#userName" });
        }
    };
})();

问题截图 #

内容的提问来源于stack exchange，提问作者Hultan