<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{
margin: 0px;
padding: 0px;
}
.squares {
color: rgb(212, 212, 212);
background-color: #2e2e2e;
width: 40px;
height: 40px;
}
.dropdown-content {
width: 100px;
height: 80px;
background-color: #7e7e7e;
}
#sidebar{
overflow: visible;
width: 40px;
height: 100px;
}
</style>
</head>
<body>
<div id="sidebar">
<div class="squares"></div>
<div class="dropdown-content"></div>
<div class="squares"></div>
</div>
</body>
</html>如何在不更改侧边栏大小的情况下使.downdown内容溢出到#侧边栏的右侧？我试过用浮子，但没用。我也尝试过将第一个.squarters和.downdown内容包含在一起，但这会导致第二个.squares的位置远离第一个.squals的底部。
您只需要将相对定位添加到.dropdown-content，将绝对定位添加到内部子菜单包装器。然后添加top: 0和left: 100%
以下是您的工作示例：
body {
margin: 0;
}
.menu {
display: inline-flex;
justify-content: center;
align-items: center;
flex-direction: column;
background: #212121;
position: fixed;
overflow: visible;
}
.menu-item {
padding: 10px;
color: #fff;
cursor: pointer;
}
.expandable {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
}
.expandable:hover > .sub-menu {
display: inline-flex;
flex-direction: column;
width: 200px;
}
.sub-menu {
position: absolute;
left: 100%;
top: 0%;
display: none;
width: 200px;
background: #fff;
color: #000;
border: 1px solid;
cursor: pointer;
}
.sub-menu-item {
padding: 10px;
}
.sub-menu-item:not(:last-child) {
padding: 10px;
border-bottom: 1px solid
}<div class="menu">
<div class="menu-item">Simple Menu</div>
<div class="menu-item expandable">
Hover to Expand >
<div class="sub-menu">
<div class="sub-menu-item">Sub Menu 1</div>
<div class="sub-menu-item">Sub Menu 2</div>
<div class="sub-menu-item">Sub Menu 3</div>
</div>
</div>
<div class="menu-item">Simple Menu</div>
</div>在我的代码.expandable中，它有子菜单，悬停在元素上时，子菜单将在该菜单项的右侧打开。位置将取决于悬停的元素。
此外，如果你想修改它，这里有代码笔链接：https://codepen.io/prathameshkoshti/pen/zYBeWEz?editors=0110
在这个例子中，我使用了多个。
.dropdown-content {
position: relative;
right: -20px;
width: 100px;
height: 80px;
background-color: #7e7e7e;
}
简单版本我不更改容器，而是将其向右移动。如果我理解正确。。。。
* {
margin: 0px;
padding: 0px;
}
#sidebar {
overflow: visible;
width: 40px;
height: 100px;
}
.squares {
position: relative;
border: 1px solid #fff;
color: rgba(212, 212, 212, 1);
background-color: #2e2e2e;
width: 40px;
height: 40px;
}
.dropdown-content {
position: absolute;
left: 40px;
top: 0px;
width: 100px;
height: 80px;
background-color: #7e7e7e;
display: none; /* sub menus will not be visible as a result */
}
.squares:hover > .dropdown-content {
display: block;
}<body>
<div id="sidebar">
<div class="squares">1</div>
<div class="squares">
2
<div class="dropdown-content">
</div>
</div>
<!-- create another container to house the .dropdown-content -->
<div class="squares">3</div>
</div>
</body>将.downdown内容插入一个.square中，然后将display:none添加到.download内容的样式中，最后在悬停时更改display:nore以阻止