Drop down menu troubleshooting

Hi there, I'm trying to troubleshoot a dropdown menu that isn't working on the default blog page. I created it as an Archive block to show blog categories on a separate blog landing page (actually an index page), but it isn't playing well with the blog posts once you click on the categories / go to the Squarespace default page. Despite the z-index, which helps the dropdown part overlap on the landing page, the Squarespace blog pages make the rest of the dropdown vanish into the posts.

So since I can't make that work, now I'm trying to make a drop UP menu instead. I'm able to make it drop up with a "bottom" property added, but then the whole clickable part vanishes once it's clicked, leaving the menu hanging with no way to close it. Any idea of how to fix this?

My CSS:

.archive-block-wrapper.archive-block-setting-layout-dropdown {
    width: 80%;
    position: absolute;
    z-index: 1!important;
    bottom: -80%; // this positions the whole menu where I want it and makes it drop up
  }

URL: https://www.youbelongsd.com/blog