oda-framework/tools/containers/dropdown/index-2.html

It's an ES Progressive Framework based on the technology of Web Components and designed especially for creating custom UI/UX of any complexity for web and cross-platform PWA mobile applications.

<meta charset="UTF-8">
<script type="module" src="../../../oda.js"></script>
<script type="module" src="./dd-test.js"></script>

<style>
    html * {
        font-family: Arial;
        color: gray;
    }

    body {
        overflow: hidden;
        user-select: none;
    }
</style>

<iframe srcdoc="<button>iFrame-1</button>" style="border: 1px solid gray; margin: 12px;"></iframe>
<oda-dropdown-tester id="dropdown-tester-0" style="max-height: 36px; z-index: 99"></oda-dropdown-tester>
<div style="display: flex; flex: 1; width: 100vw; height: 100%; position: relative;">
    <iframe id="iframe_1" style="height: calc(100% - 30px); flex: 1; border: 1px solid gray; margin: 12px;"></iframe>
    <iframe id="iframe_2" style="height: calc(100% - 30px); flex: 1; border: 1px solid gray; margin: 12px;"></iframe>
</div>

<script type="module">
    setTimeout(() => {   
        iframe_1.srcdoc = '<style>html{overflow: hidden}<\/style><script type="module" src="../../../oda.js"><\/script><script type="module" src="./dd-test.js"><\/script><iframe srcdoc="<button>iFrame-2.1</button>" style="border: 1px solid gray; margin: 12px;"></iframe><oda-dropdown-tester id="dropdown-tester-1" label="iFrame-2"></oda-dropdown-tester>';
        iframe_2.srcdoc = '<style>html{overflow: hidden}<\/style><script type="module" src="../../../oda.js"><\/script><script type="module" src="./dd-test.js"><\/script><iframe srcdoc="<button>iFrame-3.1</button>" style="border: 1px solid gray; margin: 12px;"></iframe><oda-dropdown-tester id="dropdown-tester-2" label="iFrame-3"></oda-dropdown-tester>';
    }, 100);
</script>