My dropdown menu is pushing other html elements downwards - html

Question

I am making a project and I added a dropdown menu on navbar and I don't know why that it seems to push the HTML down when toggled. I tried making its position absolute and top 100% but it didn't work, I am using bootstrap, please help
Here is the main HTML
body{
background-color: #0b0c10!important;
}
nav{
background-color: #0b0c10!important;
color: turquoise;
text-decoration: none;
}
nav a{
color: turquoise;
text-decoration: none;
font-family: 'Lato', sclear-serif;
}
nav a:hover{
color: white;
text-decoration: none;
transition-duration: 1s;
}
.navbar-nav{
margin-right: 80px;
text-align: center!important;
}
.navbar-brand{
font-family: 'Lobster', cursive;
font-size: 30px!important;
margin-left: 30px;
}
<nav class="navbar navbar-expand-lg ">
<a class="navbar-brand" href="#">Calcify</a>
</button>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More Calculator
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</nav>

Answer 1

I think you have to add jquery.min.js, popper.min.js, and bootstrap.min.js.
In the introduction of Bootstrap it states which imports you need to add. https://getbootstrap.com/docs/4.0/getting-started/introduction/#quick-start
You have to add some scripts in order to get bootstrap fully working. It's important that you include them in this exact order. Popper.js is one of them:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
Example
<nav class="navbar navbar-expand-lg ">
<a class="navbar-brand" href="#">Calcify</a>
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More Calculator
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul></nav>
.navbar{
align-items: stretch!important;
}
.navbar-nav .dropdown-menu {
position: absolute;
}

Answer 2

for your dropdown items list use
position:absolute;
z-index:5;
this worked for me

Answer 3

body{
background-color: #0b0c10!important;
}
nav{
background-color: #0b0c10!important;
color: turquoise;
text-decoration: none;
}
nav a{
color: turquoise;
text-decoration: none;
font-family: 'Lato', sclear-serif;
}
nav a:hover{
color: white;
text-decoration: none;
transition-duration: 1s;
}
.navbar-nav{
margin-right: 80px;
text-align: center!important;
}
.navbar-brand{
font-family: 'Lobster', cursive;
font-size: 30px!important;
margin-left: 30px;
}
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Calcify</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
More Calculator
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>