我正在尝试实现如下所示的目标。
- 容器包含一组下拉列表，单击时将激活下拉菜单，并且下拉菜单位于每个父级的顶部。
面临的问题：
我现在遇到的问题是下拉菜单隐藏在容器内，而不是出现在父级别的顶部。
我尝试过的：
我尝试了position:absolute，它非常适合将列表放在每个父项的顶部。
另一方面，溢出的下拉列表会将其位置保留在其设置位置，而不是遵循其下拉标签。
因此，需要position:relative。
有人可以对此提供一些说明吗？
非常感谢您的帮助。
http://jsfiddle.net/6r94bpof/
html,body{
margin: 0;
padding: 0;
overflow: hidden;
}
.land{
display: grid;
grid-template-rows: 1fr 8fr;
height: 100vh;
}
.mainmenu{
border: solid 2px grey;
width: 100%;
height: 80px;
display: flex;
overflow: hidden;
position: relative;
}
.left{
width: 50%;
max-width: 50%;
}
.left-selection{
display: flex;
overflow-y: hidden;
overflow-x: scroll;
}
.right{
width: 50%;
max-width: 50%;
}
.right-selection{
display: flex;
overflow-y: hidden;
overflow-x: scroll;
}
.ddgroup{
display: flex;
}
.ddlist{
position: relative;
display: none;
list-style-type: none;
}
input[type=checkbox]:checked ~ .ddlist{
display: block;
position: relative;
}
<html>
<body>
<div class="land">
<div class="mainmenu">
<div class="left">
<div class="left-selection">
<div class="ddgroup">
<ul class="ddmenu">
<input type="checkbox" id="ctrl"/>
<label class="btn" for="ctrl">Click me!</label>
<ul class="ddlist">
<li><a href="#">Sub-1</a></li>
<li><a href="#">Sub-2</a></li>
<li><a href="#">Sub-3</a></li>
</ul>
</ul>
<ul class="ddmenu">
<input type="checkbox" id="ctrl"/>
<label class="btn" for="ctrl">Click me!</label>
<ul class="ddlist">
<li><a href="#">Sub-1</a></li>
<li><a href="#">Sub-2</a></li>
<li><a href="#">Sub-3</a></li>
</ul>
</ul>
<ul class="ddmenu">
<input type="checkbox" id="ctrl"/>
<label class="btn" for="ctrl">Click me!</label>
<ul class="ddlist">
<li><a href="#">Sub-1</a></li>
<li><a href="#">Sub-2</a></li>
<li><a href="#">Sub-3</a></li>
</ul>
</ul>
<ul class="ddmenu">
<input type="checkbox" id="ctrl"/>
<label class="btn" for="ctrl">Click me!</label>
<ul class="ddlist">
<li><a href="#">Sub-1</a></li>
<li><a href="#">Sub-2</a></li>
<li><a href="#">Sub-3</a></li>
</ul>
</ul>
<ul class="ddmenu">
<input type="checkbox" id="ctrl"/>
<label class="btn" for="ctrl">Click me!</label>
<ul class="ddlist">
<li><a href="#">Sub-1</a></li>
<li><a href="#">Sub-2</a></li>
<li><a href="#">Sub-3</a></li>
</ul>
</ul>
<ul class="ddmenu">
<input type="checkbox" id="ctrl"/>
<label class="btn" for="ctrl">Click me!</label>
<ul class="ddlist">
<li><a href="#">Sub-1</a></li>
<li><a href="#">Sub-2</a></li>
<li><a href="#">Sub-3</a></li>
</ul>
</ul>
<ul class="ddmenu">
<input type="checkbox" id="ctrl"/>
<label class="btn" for="ctrl">Click me!</label>
<ul class="ddlist">
<li><a href="#">Sub-1</a></li>
<li><a href="#">Sub-2</a></li>
<li><a href="#">Sub-3</a></li>
</ul>
</ul>
<ul class="ddmenu">
<input type="checkbox" id="ctrl"/>
<label class="btn" for="ctrl">Click me!</label>
<ul class="ddlist">
<li><a href="#">Sub-1</a></li>
<li><a href="#">Sub-2</a></li>
<li><a href="#">Sub-3</a></li>
</ul>
</ul>
<ul class="ddmenu">
<input type="checkbox" id="ctrl"/>
<label class="btn" for="ctrl">Click me!</label>
<ul class="ddlist">
<li><a href="#">Sub-1</a></li>
<li><a href="#">Sub-2</a></li>
<li><a href="#">Sub-3</a></li>
</ul>
</ul>
</div>
</div>
</div>
<div class="right">
<div class="right-selection">
<h1>Test<h1/>
<h1>Test<h1/>
</div>
</div>
</div>
</div>
</body>
</html>
我无法复制你的 html 和 css，所以我创建了自己的 html 和 css，如果它与你的查询不匹配，请告诉我，我会调整
*{ margin: 0; padding: 0; box-sizing: border-box; } input{ display:none; } ul, li{ list-style: none; } ul{ display: flex; justify-content: space-around; gap:1rem; padding: 1rem ; } li{ position: relative; } .dropdown-content { box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px; margin-top: 10px; display: none; } .dropdown-content > *{ display: block; text-align: center; text-decoration: none; color: #38dce5; margin-top: 0.3rem; padding: 0.3rem; } input:checked ~ .dropdown-content { display: block; }