Css 如何使元素溢出到包含元素的外部？

*{
边际：0px；
填充：0px；
}
.正方形{
颜色：rgb（212、212、212）；
背景色：#2e；
宽度：40px；
高度：40px；
}
.下拉内容{
宽度：100px；
高度：80px；
背景色：#7e7e7e；
}
#边栏{
溢出：可见；
宽度：40px；
高度：100px；
}

您只需将相对定位添加到

下拉列表内容中，并将绝对定位添加到内部子菜单包装中即可。然后添加
top:0
和
left:100%

以下是您的工作示例：


正文{
保证金：0；
}
.菜单{
显示：内联flex；
证明内容：中心；
对齐项目：居中；
弯曲方向：立柱；
背景:#212121 ;；
位置：固定；
溢出：可见；
}
.菜单项{
填充：10px；
颜色：#fff；
光标：指针；
}
.可扩展{
位置：相对位置；
显示：内联flex；
证明内容：中心；
对齐项目：居中；
}
.可展开：悬停>.子菜单{
显示：内联flex；
弯曲方向：立柱；
宽度：200px；
}
.子菜单{
位置：绝对位置；
左：100%；
最高：0%；
显示：无；
宽度：200px；
背景：#fff；
颜色：#000；
边框：1px实心；
光标：指针；
}
.子菜单项{
填充：10px；
}
.子菜单项：非（：最后一个子项）{
填充：10px；
边框底部：1px实心
}

简单菜单
悬停以展开>
子菜单1
子菜单2
子菜单3
简单菜单

简单版本我不更改容器，而是将其向右移动。
如果我理解正确……

*{
边际：0px；
填充：0px；
}
#边栏{
溢出：可见；
宽度：40px；
高度：100px；
}
.正方形{
位置：相对位置；
边框：1px实心#fff；
颜色：rgba（212、212、212、1）；
背景色：#2e；
宽度：40px；
高度：40px；
}
.下拉内容{
位置：绝对位置；
左：40px；
顶部：0px；
宽度：100px；
高度：80px；
背景色：#7e7e7e；
显示：无；/*子菜单将因此不可见*/
}
.squares:hover>。下拉列表内容{
显示：块；
}

1.
2.
3.
溢出：侧边栏上可见的
应该可以。很抱歉，我忘了添加它，但如何让它首先溢出到右侧？默认情况下它会溢出到右侧。这不是因为侧边栏的宽度设置为40px，小于。下拉内容。一个片段可能会有用。感谢您的回复，工作完美。不知道“位置：绝对”是“相对于其最近的祖先”。我有一个问题，剩下100%是什么意思？什么是100%的？当您将元素的位置设置为绝对/固定/相对/粘性时，您可以根据需要调整位置。它有4个属性：顶部、底部、左侧和右侧。所以当我提到left应该是100%时，这意味着我希望元素的左侧应该有100%的空间（元素的宽度），这意味着相对于其父容器，左侧应该有200px的空间。因此，它不会在主菜单项上重叠，并导致它在菜单的右侧渲染。
        .dropdown-content {
            position: relative;
            right: -20px;
            width: 100px;
            height: 80px;
            background-color: #7e7e7e;
        }