Make sure the dropdown always appears on top of its parent, position: relative
I'm trying to achieve something like below.
- The container contains a set of dropdown lists that activate when clicked and are located on top of each parent.
the problem we are facing:
The problem I'm having right now is that the dropdown menu is hidden inside the container instead of appearing on top of the parent level.
What I tried:
I tried position:absolute and it works great for putting the list on top of each parent.
On the other hand, an overflowed dropdown will retain its position at its set location rather than following its dropdown label.
Therefore, position:relative is required.
Can someone provide some clarification on this?
Thank you for your help.
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>
