Assurez-vous que la liste déroulante apparaît toujours au-dessus de son parent, position : relative
J'essaie de réaliser quelque chose comme ci-dessous.
- Container contient un ensemble de listes déroulantes qui s'activent lorsque vous cliquez dessus et les listes déroulantes sont situées au-dessus de chaque parent.
Problèmes rencontrés :
Le problème que j'ai maintenant est que le menu déroulant est caché à l'intérieur du conteneur au lieu d'apparaître en haut du niveau parent.
Ce que j'ai essayé :
J'ai essayé position:absolute et cela fonctionne très bien pour mettre la liste en haut de chaque parent.
Une liste déroulante débordée, en revanche, conservera sa position à son emplacement défini au lieu de suivre son étiquette de liste déroulante.
Par conséquent, position:relative est requis.
Quelqu'un peut-il apporter des éclaircissements à ce sujet ?
Merci beaucoup pour votre aide.
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>
