我正在嘗試實現如下所示的目標。
面臨的問題：
#我現在遇到的問題是下拉式選單隱藏在容器內，而不是出現在父等級的頂部。
我嘗試過的：
#我嘗試了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; }