<ul> dropdown pushing up parent <li> - html

Question

I want to add a CSS dropdown menu to my header. It's works in part...
but when you mouse over it, this element escapes up. How to set it correctly?
It should stay in place and dropdown should be under the <li> element.
* {
margin: 0px;
padding: 0px;
font-family: 'Advent Pro', sans-serif;
}
body {
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
}
.wrapper {
display: flex;
flex-direction: column;
}
.navbar-list,
.navbar-list a,
.navbar,
.logo {
display: flex;
align-items: center;
}
.navbar {
display: flex;
background: #008cf4;
padding: 0 20px;
flex-wrap: wrap;
border-bottom: 1px solid #d6d7dd;
font-size: 14px;
}
.navbar .navbar-list {
height: 80px;
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
margin-left: auto;
flex-wrap: wrap;
flex-grow: 1;
justify-content: flex-end;
}
.navbar .navbar-list a {
color: #e9e9e9;
text-decoration: none;
margin: 0 10px;
padding: 0 10px;
text-transform: uppercase;
}
.navbar .navbar-list a:hover {
color: #fff;
}
.navbar .navbar-list i {
font-size: 14px;
color: inherit;
padding-bottom: 1px;
}
.navbar .navbar-list ul {
display: none;
flex-direction: column;
list-style-type: none;
}
.navbar .navbar-list ul li {
list-style-type: none;
justify-content: center;
align-items: flex-end;
align-content: flex-start;
height: auto !important;
opacity: 0.8;
background: black;
text-align: center;
}
.navbar .navbar-list ul li a {
height: 10px !important;
}
.navbar .navbar-list ul li a:hover {
background-color: #a4a4a4;
height: 10px;
}
.navbar .navbar-list li:hover ul {
display: block;
height: auto !important;
}
.navbar .logo {
margin-right: 15px;
}
.navbar .logo h1 {
font-family: 'Alegreya', sans-serif;
font-size: 35px;
}
<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href='//fonts.googleapis.com/css?family=Alegreya&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Advent+Pro&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<script src="//code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">
</script>
<div class="wrapper">
<nav class="navbar">
<div class="logo">
<h1>Your logo</h1>
</div>
<ul class="navbar-list">
<li>
<a href="#">
<i class="material-icons">home</i> Dashboard
</a>
</li>
<li>
<a href="#">
<i class="material-icons">build</i> Account & settings
</a>
<ul>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
</ul>
</li>
</ul>
<div>avatar</div>
</nav>
</div>
View on Codepen with SCSS

Answer 1

You need to set position:relative to the parent item, then position:absolute on the dropdown.
Without touching the HTML, that'd be
.navbar-list > li{
position:relative;
}
.navbar-list ul{
position:absolute;
width:100%;
}
The second rule sets any <ul> that's a descendant from the .navbar-list as absolute positioned, removing it from the flow so they won't "push" others, while the first makes the any <li> that's a direct child of the .navbar-list the point from which their child <ul> will be positioned.

Answer 2

Add position: relative to .navbar-list li
Add position: absolute top: 100% left: 0 and width: 100% to li ul
Updated codepen

Answer 3

try this
* {
margin: 0px;
padding: 0px;
font-family: 'Advent Pro', sans-serif;
}
body {
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-height: 100vh;
}
.wrapper {
display: flex;
flex-direction: column;
}
.navbar-list,
.navbar-list a,
.navbar,
.logo {
display: flex;
align-items: center;
}
.navbar {
display: flex;
background: #008cf4;
padding: 0 20px;
flex-wrap: wrap;
border-bottom: 1px solid #d6d7dd;
font-size: 14px;
}
.navbar .navbar-list {
height: 80px;
list-style-type: none;
padding: 0;
margin: 0;
display: flex;
margin-left: auto;
flex-wrap: wrap;
flex-grow: 1;
justify-content: flex-end;
}
.navbar .navbar-list a {
color: #e9e9e9;
text-decoration: none;
margin: 0 10px;
padding: 0 10px;
text-transform: uppercase;
}
.navbar .navbar-list a:hover {
color: #fff;
}
.navbar .navbar-list i {
font-size: 14px;
color: inherit;
padding-bottom: 1px;
}
.navbar .navbar-list ul {
display: none;
flex-direction: column;
list-style-type: none;
position: absolute;
width: auto;
}
.navbar .navbar-list ul li {
list-style-type: none;
justify-content: center;
align-items: flex-end;
align-content: flex-start;
height: auto !important;
opacity: 0.8;
background: black;
text-align: center;
position: relative;
}
.navbar .navbar-list ul li a {
height: 10px !important;
}
.navbar .navbar-list ul li a:hover {
background-color: #a4a4a4;
height: 10px;
}
.navbar .navbar-list li:hover ul {
display: block;
height: auto !important;
}
.navbar .logo {
margin-right: 15px;
}
.navbar .logo h1 {
font-family: 'Alegreya', sans-serif;
font-size: 35px;
}
<link href="//fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href='//fonts.googleapis.com/css?family=Alegreya&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Advent+Pro&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<script src="//code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">
</script>
<div class="wrapper">
<nav class="navbar">
<div class="logo">
<h1>Your logo</h1>
</div>
<ul class="navbar-list">
<li>
<a href="#">
<i class="material-icons">home</i> Dashboard
</a>
</li>
<li>
<a href="#">
<i class="material-icons">build</i> Account & settings
</a>
<ul>
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
</ul>
</li>
</ul>
<div>avatar</div>
</nav>
</div>