How to make navbar dropdowns not expand the navbar in pure CSS - css

Question

I have a navbar and it contains dropdowns. When expanded I want the dropdown to sit on top of the content below the navbar. Instead, it expands the whole navbar so that it contains the dropbox, and pushes all the content down. I am after a pure CSS solution, I don't use CSS frameworks.
I am using flex blocks in my code and I want to know the correct and simplest way to get the effect I want.
The code below is as simple as I can make it, but bear in mind that I will be making the navbar responsive on my actual web page.
The dropdown is in the div with class="dropdown".
CSS
.navbar {
display: flex;
justify-content: space-between;
background-color: white;
width: 100%;
}
.dropdown {
color: black;
}
.dropdown-list {
display: none;
}
.dropdown-item {
color: blue;
}
.dropdown:hover .dropdown-list {
display: flex;
flex-direction: column;
}
HTML
<div class="navbar">
<div class="dropdown">Menu
<div class="dropdown-list">
<div class="dropdown-item">AA</div>
<div class="dropdown-item">BBBBB</div>
<div class="dropdown-item">CCC</div>
</div>
</div>
<div>DDD</div>
<div>EEEEE</div>
</div>
You can view the code in action here, click [Menu] on the left to see the dropdown. Rather than expanding the navbar I want it to sit on top of the content: Codepen

Answer 1

You can do that by making the dropdown's position property as absolute and making its parent container relative.
.dropdown {
color: black;
position:relative;
}
.dropdown-list {
display: none;
background:#f4f4f4;
position:absolute;
top:10px;
left:10px;
padding:5px;
text-align:center;
}
Whole code:
.navbar {
display: flex;
justify-content: space-between;
background-color: lightgray;
width: 100%;
}
.dropdown {
color: black;
position:relative;
}
.dropdown-list {
display: none;
background:#f4f4f4;
position:absolute;
top:18px;
left:10px;
padding:5px;
text-align:center;
}
.dropdown-item {
color: blue;
}
.dropdown:hover .dropdown-list {
display: flex;
flex-direction: column;
}
<div class="navbar">
<div class="dropdown">Menu
<div class="dropdown-list">
<div class="dropdown-item">AA</div>
<div class="dropdown-item">BBBBB</div>
<div class="dropdown-item">CCC</div>
</div>
</div>
<div>DDD</div>
<div>EEEEE</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ultricies dapibus nibh sit amet vestibulum. Nam consequat, erat eu lobortis ornare, turpis dui finibus ligula, quis vulputate mauris nunc vel mauris. In et justo id nisi egestas scelerisque. Sed blandit, risus vitae condimentum varius, lacus tortor congue dolor, et tristique urna arcu eu eros. Quisque consequat, augue vitae tincidunt porttitor, risus eros posuere nulla, sed euismod ante est sit amet orci. Cras mattis at nibh vel lobortis. Fusce feugiat iaculis mattis.
Sed condimentum, neque quis consectetur venenatis, augue dolor tincidunt odio, vel dapibus leo orci ac metus. Aliquam ut commodo lectus, sagittis fermentum lorem. Suspendisse euismod sollicitudin turpis, ac imperdiet elit imperdiet vitae. Quisque imperdiet cursus velit. Etiam leo ligula, iaculis nec sollicitudin in, venenatis nec tellus. Duis ut quam fermentum, iaculis nisl eu, aliquet nunc. Proin maximus diam lorem, et molestie tortor porttitor sodales. Nam at urna tempus, ultricies sapien id, semper augue. Donec in felis ante. Mauris eu dignissim est.
Donec ullamcorper sollicitudin tortor. Nam tortor tortor, cursus nec lacus non, convallis gravida sapien. Donec ac libero sollicitudin, varius tortor vel, blandit nibh. Quisque ligula erat, lobortis sit amet urna ut, efficitur blandit turpis. Nam tempus fringilla odio, eleifend feugiat libero fermentum eget. Suspendisse non tempor lectus. Sed vel fermentum sapien. Vivamus non lorem arcu. In egestas feugiat eros ut suscipit. Ut sit amet lorem ut erat ornare blandit sed a felis. Nulla facilisi. In ullamcorper accumsan facilisis. Suspendisse potenti. Morbi gravida tristique sollicitudin. Quisque et iaculis nibh. Maecenas tempus ex ac mi convallis suscipit.
Nam varius elit eget mauris interdum tempus. Cras nec sodales felis. Suspendisse elit magna, auctor id suscipit non, fringilla id lacus. Nullam mattis justo arcu, at consequat eros pulvinar id. Morbi varius, elit elementum ornare condimentum, risus tellus sollicitudin ex, nec mattis risus diam quis nibh. In nec efficitur ipsum. Ut ac sapien id libero dapibus faucibus.
Suspendisse tempor mauris sem, pulvinar finibus magna lacinia id. Proin vel risus quis nisl volutpat gravida ut interdum tellus. Nulla laoreet scelerisque ipsum, eget elementum augue dignissim vel. Morbi pretium felis non urna maximus, nec pellentesque ante dignissim. In at efficitur diam, pulvinar aliquam justo. Aenean in erat tellus. Duis sem mauris, placerat nec ullamcorper sed, posuere tincidunt purus. Proin eleifend ipsum est, sed volutpat quam mattis vitae. Integer vitae ultricies felis.

Answer 2

here you are,
use this piece of code
.navbar {
display: flex;
justify-content: space-between;
background-color: lightgray;
width: 100%;
position:fixed;
top:0;
left:0;
right:0;
}
You can use this code to get Drop Down out:
.dropdown-list {
display: none;
background:#f00;
padding:10px;
position:fixed;
top:20;
left:0;
right:0;
}
top attribute must be header size or greater