<分区>
标签 javascript html css
<分区>
我有以下下拉 html 结构和 css，它的父项隐藏了溢出 -
我遇到的问题是，当您选择下拉菜单时，它被隐藏的溢出切断，我需要它来忽略溢出。
我考虑过将下拉菜单的位置更改为固定的，但是我需要计算每个下拉菜单的位置，任何其他建议都会有所帮助!
.overflow-container {
display: block;
height: 60px !important;
overflow: auto;
overflow-x: hidden;
float: left;
background-color: #eaeaea;
padding: 20px;
}
.dropdown-container:hover .dropdown1 {
display: block;
}
.dropdown1 {
display: none;
}<div class="overflow-container">
<div class="dropdown-container">
Select an option
<ul class="dropdown1">
<li class="dropdown-item">Option 1</li>
<li class="dropdown-item">Option 2</li>
<li class="dropdown-item">Option 3</li>
</ul>
</div>
<div class="dropdown-container">
Select an option
<ul class="dropdown1">
<li class="dropdown-item">Option 1</li>
<li class="dropdown-item">Option 2</li>
<li class="dropdown-item">Option 3</li>
</ul>
</div>
<div class="dropdown-container">
Select an option
<ul class="dropdown1">
<li class="dropdown-item">Option 1</li>
<li class="dropdown-item">Option 2</li>
<li class="dropdown-item">Option 3</li>
</ul>
</div>
</div>查看工作中的 JSFiddle - https://jsfiddle.net/DarianSteyn/oq1w6eds/7/
该结构是使用设置 html 和 css 的插件构建的。我可以更改 css 但不能更改 html 结构。我也无法更改父级的高度，如果有多个下拉菜单，它需要可滚动。
最佳答案
使用 position:absolute 并使用 margin 或 translate 来调整位置。然后不要将position:relative 添加到父元素，这样它就会被溢出忽略。
.overflow-container {
display: block;
height: 60px !important;
overflow: auto;
overflow-x: hidden;
float: left;
background-color: #eaeaea;
padding: 20px;
}
.dropdown-container:hover .dropdown1 {
display: block;
}
.dropdown1 {
display: none;
position:absolute;
margin-left:100px;
margin-top:-10px;
}<div class="overflow-container">
<div class="dropdown-container">
Select an option
<ul class="dropdown1">
<li class="dropdown-item">Option 1</li>
<li class="dropdown-item">Option 2</li>
<li class="dropdown-item">Option 3</li>
</ul>
</div>
<div class="dropdown-container">
Select an option
<ul class="dropdown1">
<li class="dropdown-item">Option 1</li>
<li class="dropdown-item">Option 2</li>
<li class="dropdown-item">Option 3</li>
</ul>
</div>
<div class="dropdown-container">
Select an option
<ul class="dropdown1">
<li class="dropdown-item">Option 1</li>
<li class="dropdown-item">Option 2</li>
<li class="dropdown-item">Option 3</li>
</ul>
</div>
</div>关于javascript - 忽略父元素溢出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53061013/