Search results gets cut off by navbar (parent div) - css

Question

I've been trying to solve this for two straight days and didn't get it right yet. I basically have a search input inside a nav with results coming from a json file and even though it has a z-index greater than the nav it still gets cut off.
<nav class="navbar">
<ul class="navul">
<li>
<a href="index.html" style="margin: 0; margin-top: 0;">
<img src="logo.png" width="40" height="40">
</a>
</li>
<li>Link1</li>
<li><a style="position: relative;" class="active" href="#">Link</a></li>
<li>Link</li>
<li><div class="search-container">
<form action="" autocomplete="off">
<input autocomplete="off" type="text" name="search" id="search" class="form-control">
<ul class="list-group" id="result"></ul> <- this is the result box
</form>
</div>
</li>
</ul>
</nav>
Here is the CSS with the navbar, the content which goes under it and the search result box
.navbar {
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
backdrop-filter: blur(20px);
background: rgba(255, 255, 255, 0.1);
position: fixed;
z-index: 1;
}
.navul {
list-style-type: none;
margin: 0;
padding: 0;
padding-left: 2%;
padding-right: 2%;
position: relative;
overflow: hidden;
}
.navul li {
float: left;
padding: 3px;
}
.navul a {
display: block;
color: rgba(255, 255, 255, 0.5);
text-align: center;
padding: 18px 20px;
margin: .4em;
text-decoration: none;
transition: all 0.12s ease-in-out 0s;
}
.content {
float: left;
width: 96%;
color: black;
margin-top: 8%;
margin-bottom: 8%;
margin-left: 2%;
margin-right: 2%;
position: relative;
}
#result {
position: absolute;
width: 40%;
max-width:870px;
cursor: pointer;
overflow-y: auto;
max-height: 400px;
box-sizing: border-box;
z-index: 1001;
}