我使用砖石布局来获得两个柱，每个柱中都有不同的高度元素。在第一列中，我有一个下拉元素，包含3个条目。当我将鼠标悬停在下拉列表上时，内容显示在第二列，而不是第一列。我想这是因为我使用的砖石布局。如何更新代码以使下拉列表显示第一列中的内容？
这是代码：
.dropdown {
float: left;
overflow: hidden;
}
.dropdown-content {
width: 100%;
display: none;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: inline-block;
}
.masonry-wrapper {
column-count: 2;
width: 100%;
}
.item {
float: right;
width: 100%;
}<body>
<div class="masonry-wrapper">
<div class="item">
<h1> Left item </h1>
</div>
<div class="dropdown">
<h1> Dropdown </h1>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="item">
<h1> Right item </h1>
</div>
</div>
</body>可能不是你想要的，但它满足了你的要求。删除"；位置：绝对"并且改变了"；显示：块"至"；显示：内联块&"；。
.dropdown {
float: left;
overflow: hidden;
}
.dropdown-content {
width: 100%;
display: none;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: inline-block;
}
.masonry-wrapper {
column-count: 2;
width: 100%;
}
.right-item {
float: right;
width: 100%;
}<body>
<div class="masonry-wrapper">
<div class="dropdown">
<h1> Dropdown </h1>
<div class="dropdown-content">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
</div>
</div>
<div class="right-item">
<h1> Right item </h1>
</div>
</div>
</body>