Entire nav bar overlapping the content below - html

Question

I'm having an issue with the CSS of the navigation bar.This is what happens when I hover over .dropbtn.
Here's my HTML code for the drop down navigation bar.
<div class="nav-wrapper">
<ul id="nav">
<img id="logo" src="Images/dramay.jpg">
<li class="dropdown">
Movies & TV ⏷
<div class="dropdown-content">
<b style="font-size: 15px">MOVIES</b>
In Theaters
Coming Soon
Categories
Most Popular
<b style="font-size: 15px" > TV </b>
<a href="#" >Timings</a>
Latest shows
Top rated
</div>
</li>
<li class="dropdown">
Celebs & photos ⏷
<div class="dropdown-content">
<b style="font-size: 15px">Celebs</b>
Born today
Most popular
<b style="font-size: 15px">Photos</b>
latest stills
Latest posters
</div>
</li>
<li class="dropdown">
News ⏷
<div class="dropdown-content">
<b style="font-size: 15px">News</b>
Top news
Movies news
TV news
</div>
</li>
<li class="search" style="float:right;"><a>
<input type="text" name="firstname" placeholder="SEARCH">
</a>
</li>
<li class="dropdown" id="signIN">
Sign In
</li>
<li class="dropdown" id="signUP">
Sign Up
</li>
</ul>
</div>
And here's the CSS.
ul#nav {
list-style-type: none;
margin: 0;
padding: 0;
position: inherit;
width: 100%;
overflow: hidden;
background: #332;
}
.nav-wrapper
{
position: fixed;
width: 100%;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: lightgrey;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color:#00b300;
}
li a:hover, .search:hover {
background-color:black;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
color:black;
position: relative;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-size: 15px;
z-index: 1;
}
.dropdown-content a:hover {
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content {
display: block;
}
I have tried overflow:hidden on ul#nav and .nav-wrapper but none of it works.
(Apologies in advance for my bad english)

Answer 1

add following css
ul#nav {
overflow: visible;
}
ul#nav li {
position: relative;
}
.dropdown-content {
position: absolute;
left: 0px;
top: 100%;
}

Answer 2

Make 2 change in your css :-
1) Remove overflow: hidden; in ul#nav class
ul#nav {
list-style-type: none;
margin: 0;
padding: 0;
position: inherit;
width: 100%;
/*overflow: hidden;*/
background: #332;
}
2) Change position in .dropdown-content
.dropdown-content {
background-color: #f9f9f9;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
color: black;
display: none;
min-width: 160px;
position: absolute;
z-index: 1;
}