CSS - 允许div扩展到溢出隐藏的祖先之外

Question

在我的HTML中，我有一个<div>我希望允许它溢出其伟大的曾祖父母 - 基本上，祖先是一个菜单项容器，当一个菜单单击项目（所讨论的<div>的父项），<div>将打开并占用它所需的所有空间，这可能会溢出其所有祖先。好的，首先是一些图片来帮助...

以下是我希望看到的内容 - 蓝色＆＃39;菜单内容＆＃39; <div>将黄色g-g-g-grandparent溢出到右边的空白处：

然而，尽管我付出了最大努力，但实际上我得到的只是：

所以蓝色在黄色边缘切断。

这是我目前所获得的HTML / CSS（有些可能无关紧要，但我确保包含所有内容）：

#nav-settings-wrapper{
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 100;
    top: 0;
    left: 0;
    position: absolute;
    width: 230px;
    height: 100%;
    display: block;
    background-color: yellow;
}

#nav-content-container{
    height: 80%;
    min-height: 475px;
    min-width: 230px;
    position: relative;
    margin-bottom: 30px;
    display: block;
}

#nav-settings{
    margin: 90px 20px 0;
    padding: 0;
    background-color: white
}

#nav-settings__item{
    position: relative;
    padding: 15px 0;
    border-bottom: 1px solid #0097D8;
}

#dropdown{
    position: relative;
    color: black;
}

#dropdown-menu{
    width: 400px;
    background-color: blue;
    color: #FFF;
    position: fixed;
    top: 100%;
    left: 0;
    z-index: 1000;
}

<div id="nav-settings-wrapper">
    <div id="nav-content-container">
        <div id="nav-settings">
            <div id="nav-settings__item">
                <div id="dropdown">
                    Menu item
                    <div id="dropdown-menu">
                        Menu content
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

在做一些实验时，我确实发现关闭ggg-grandparent的两个overflow属性确实允许这种行为（虽然有一些其他问题），但关闭它们并不是一个真正的选择 - 我需要允许溢出-y，并允许溢出-x保持蓝色内部＆＃39;黄色，让我滚动到一边 - 不是我需要的......

我不是一个真正的设计人员，这是一个我在中间拾取的项目，因此任何有关如何让我的元素表现得像第一张图像的指导都会很多赞赏。