css - 相对于全局容器放置绝对定位的下拉菜单

Question

我有这个 html 代码：

<div class="dropdown">
    <button></button>
    <menu></menu>
</div>

在按钮单击下拉列表（元素“菜单”）显示。这个下拉菜单有“位置：绝对”。我的所有页面都有条件地限制在容器中，并且任何内容都不应位于此容器之外，包括下拉菜单。我可以在没有 JavaScript 的情况下使下拉菜单相对于按钮位于中心，但不能超出容器吗？

这是我的CSS：

:root {
    --size-container: 1140px;
    --size-container-col: calc(var(--size-container) / 12);
    --size-container-padding: calc((100vw - var(--size-container)) / 2);
}

.dropdown {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dropdown > menu {
    position: absolute;
    right: var(--size-container-padding)
    margin-top: 90px;
    border: 2px solid #aaaaaa;
    visibility: hidden;
    opacity: 0;
    z-index: 9;
    background-color: #ffffff;
    transform: translateY(-60px);
    transition-property: opacity, transform, box-shadow;
}
.dropdown > menu:before {
    content: "";
    position: absolute;
    top: -17px;
    width: 30px;
    height: 30px;
    border: solid #aaaaaa;
    border-width: 2px 0 0 2px;
    z-index: -1;
    background-color: #ffffff;
    transform: translateX(-50%) rotate(45deg);
}

这是我的代码结果

如果我删除“.dropdown > menu”上的“right”属性