Setting CSS position property affecting to links totally elsewhere on the page

So, I have a menu on top of my page. Not directly related to my problem but it's loaded from MySQL database and this menu is actually a root node of a tree and it direct children (meaning one level of it). HTML looks like this:

  <div class="desktop-nav">
<nav>
  <ul>
    <li><a href="index.html">Main page</a></li>
    <li class="drop-down"><a href="#">RootNode</a>
    <ul>
        <li><a href="index.html">Node 1</a></li>
        <li><a href="index.html">Node 2</a></li>
    </ul>
    </li>
  </ul>
</nav>

I have some javascript code related to it: https://github.com/einohaltija/Test/blob/main/thisworks/index_files/main.js And some CSS:

/* Desktop nav */
.desktop-nav {
    background:#313b57;
    width: 100%;
    height: 33.5px;
}


nav {
  float:right;
}

nav ul {
  display: flex;
  list-style: none;
}


nav ul a {
  min-width:160px;
    font-family: "Abel", "PT Sans", Calibri, sans-serif;
    padding: 8px 16px;
    display: block;
    text-decoration: none;
    font-size: 14px;
    color:#fff;
    background:#313b57;
}


nav ul a:hover {
  background:#435091;
}


nav ul ul {
  display: none;
  position: absolute;
  flex-direction: column;
  box-shadow: 3px 2px 2px -1px rgba(0, 0, 0, .32);
}


nav ul ul a {
 min-width:160px;
}

All this is working perfectly fine until I load a page where I present a tree (with ul/li) of buttons.

<div class="tree" id="RootNode">
    <ul>
    <li>
    <button class="button2" aria-pressed="false" data-js="node" id="1">RootNode</button>
    <ul>
        <li><button class="button2" aria-pressed="false" data-js="node" id="102">Node 1</button></li>
        <li><button class="button2" aria-pressed="false" data-js="node" id="103">Node 2</button></li>
    </ul>
    </li>
    </ul>
</div>

Tree is editable and of course when it is saved, all the changes can be shown in my menu when the page is reloaded. Now, when I have the treeview, it's CSS setting "position: relative" seems to break my menu on the top of the page. Menu items are not highlighted on hover and links don't work anymore.

So what have I tried? All I can really do is to isolate the problem for someone more skilled than myself. I feel I have nowhere to go and there is nothing to try since I have no idea why this happens. I can't see how these two things are related. I would very much appreciate any help anyone can provide. This is beyond me.

There's more code, not directly related to this like responsive menus and stuff. I have isolated the problem and uploaded my code to GitHub to make our lives easier. There is two folders, one has the page that works and other one has the page that doesn't: https://github.com/einohaltija/Test