Navbar dropdown not working on a relative position - html

Question

Currently I'm trying to replicate this navbar https://www.codingnepalweb.com/responsive-dropdown-menu-bar-html-css/ for my webpage. This navbar is set on a fixed position so whenever I scroll, it stays in the particular position. I didn't want this, so I changed it to relative position. But doing so made the dropdowns in the navbar unusable as whenever I try to access the options, the dropdown goes away. How do I make it so that the navbar is not fixed and the dropdowns are still accessible.
CodeSandbox: https://codesandbox.io/s/quizzical-mopsa-71uzh?file=/src/App.tsx
Code:
<div class="wrapper">
<nav>
<input type="checkbox" id="show-search"/>
<input type="checkbox" id="show-menu"/>
<label for="show-menu" class="menu-icon"><i class="fas fa-bars"></i></label>
<div class="content" style={{width:"100%"}}>
<div class="logo">Image</div>
<ul class="links">
<li>Home</li>
<li>About</li>
<li>
Features
<input type="checkbox" id="show-features"/>
<label for="show-features">Features</label>
<ul>
<li>Drop Menu 1</li>
<li>Drop Menu 2</li>
<li>Drop Menu 3</li>
<li>Drop Menu 4</li>
</ul>
</li>
<li>
Services
<input type="checkbox" id="show-services"/>
<label for="show-services">Services</label>
<ul>
<li>Drop Menu 1</li>
<li>Drop Menu 2</li>
<li>Drop Menu 3</li>
<li>
More Items
<input type="checkbox" id="show-items"/>
<label for="show-items">More Items</label>
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
</ul>
</li>
<li>Feedback</li>
</ul>
</div>
</nav>
</div>

Answer 1

The Navbar which you want to copy can't be only possible with pure css.
So, You need to use javascript.
suppose you have you 2 div for the title (codingNepal) one is bigger which will hide
upon scroll down. and other div (part of navbar)will appear at once the first one disappear.
So, you can add classes to both lets say class names are biggerTitle and smallTitle
then you can add an event listener which will capture the scroll event and once you scroll down you can make biggerTitle {display: none} and smallTitle {display: block}
which has initial {display: none}.