null
<!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>null
如何使。下拉-内容溢出到#边栏的右侧而不改变边栏的大小？我试过使用浮动，但没有效果。我也尝试将第一个。squares和。dropdown-content包含在一起，但这会导致第二个。squares的位置远离第一个。squares的底部。
您只需将相对定位添加到.dropdown-content，将绝对定位添加到内部子菜单包装器。然后添加顶部:0和左侧:100%
下面是您的工作示例:
null
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>