My submenu disrupts the document flow eventhough i have set everything around it to position: static

i am making a navbar which has submenus and the submenus are triggered using a checkbox. when a submenu is triggered on mobile phones(in this case for gallery) it is supposed to push the items below it and appear in the normal document flow. but instead what happens is it overlays on top of the next item in the navbar. i have been at this for hours now. any help is appreciated
the website is

Did you solve it? It appears to work correctly now.

You can try to put the “submenu” up with the other “nav-item”. That way, what ever elements you have below that will get pushed down.

not really…the submenu still covers the item below it . which in this case is “donate” button

Ok, I was in the wrong view. i agree with @sulthanwf. Personally i would have just used a nested list and then show and hide the inner list. I find it easier to reason about that way (without the extra divs).

yes … i gues i will have to go back to the drawing board

<ul>
    <li>main-menus
        <ul>
            <li>sub-menus
        </ul>
    </li>
<ul>

you mean some thing like this?