我正在嘗試實現如下所示的目標。
面臨的問題：
#我現在遇到的問題是下拉式選單隱藏在容器內，而不是出現在父等級的頂部。
我嘗試過的：
#我嘗試了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>
P粉8967510372024-04-02 09:24:58
我無法複製你的 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;
}