all the href link in my html page go to the same folder if I add javascript in the html project

Question

This is my folder:

The problem is the javascript file, all the href in all html file is correct but if I add script.js at the pages when I click on the subs menu of the javascript's dropdown menu all the link go to the last folder, in this case curiosità.

if I delete the div (drop-down-menu-content) of curiosità all the link go to opere and so on. I tried everything in the html file and also in javascript file but after a lot of ours I'm at the same point

var menuItems = [].slice.call(document.querySelectorAll('.menu__item')),
  menuSubs = [].slice.call(document.querySelectorAll('.dropdown-menu')),
  selectedMenu = undefined,
  subBg = document.querySelector('.dropdown__bg'),
  subBgBtm = document.querySelector('.dropdown__bg-bottom'),
  subArr = document.querySelector('.dropdown__arrow'),
  subCnt = document.querySelector('.dropdown__wrap'),
  header = document.querySelector('.main-header'),
  closeDropdownTimeout,

  startCloseTimeout = function() {
    closeDropdownTimeout = setTimeout(() => closeDropdown(), 50);
    console.log(header);
  },

  stopCloseTimeout = function() {
    clearTimeout(closeDropdownTimeout);
  },

  openDropdown = function(el) {
    //- get menu ID
    var menuId = el.getAttribute('data-sub');
    //- get related sub menu
    var menuSub = document.querySelector('.dropdown-menu[data-sub="' + menuId + '"]');
    //- get menu sub content
    var menuSubCnt = menuSub.querySelector('.dropdown-menu__content');
    //- get bottom section of current sub
    var menuSubBtm = menuSubCnt.querySelector('.bottom-section').getBoundingClientRect();
    //- get height of top section
    var menuSubTop = menuSubCnt.querySelector('.top-section').getBoundingClientRect();

    //- get menu position
    var menuMeta = el.getBoundingClientRect();

    //- get sub menu position
    var subMeta = menuSubCnt.getBoundingClientRect();

    //- set selected menu
    selectedMenu = menuId;

    //- Remove active Menu
    menuItems.forEach(el => el.classList.remove('active'));
    //- Set current menu to active
    el.classList.add('active');

    //- Remove active sub menu
    menuSubs.forEach(el => el.classList.remove('active'));
    //- Set current menu to active
    menuSub.classList.add('active');

    //- Set dropdown menu background style to match current submenu style
    subBg.style.opacity = 1;
    subBg.style.left = menuMeta.left - (subMeta.width / 2 - menuMeta.width / 2) + 'px';
    subBg.style.width = subMeta.width + 'px';
    subBg.style.height = subMeta.height + 'px';
    //- Set dropdown menu bottom section background position
    subBgBtm.style.top = menuSubTop.height + 'px';

    //- Set Arrow position
    subArr.style.opacity = 1;
    subArr.style.left = menuMeta.left + menuMeta.width / 2 - 10 + 'px';

    //- Set sub menu style
    subCnt.style.opacity = 1;
    subCnt.style.left = menuMeta.left - (subMeta.width / 2 - menuMeta.width / 2) + 'px';
    subCnt.style.width = subMeta.width + 'px';
    subCnt.style.height = subMeta.height + 'px';

    //- Set current sub menu style
    menuSub.style.opacity = 1;

    header.classList.add('dropdown-active');
  },

  closeDropdown = function() {
    //- Remove active class from all menu items
    menuItems.forEach(el => el.classList.remove('active'));

    //- Remove active class from all sub menus
    menuSubs.forEach(el => {
      el.classList.remove('active');
      el.style.opacity = 0;
    });
    //- set sub menu background opacity
    subBg.style.opacity = 0;
    //- set arrow opacity
    subArr.style.opacity = 0;

    // unset selected menu
    selectedMenu = undefined;

    header.classList.remove('dropdown-active');
  };

//- Binding mouse event to each menu items
menuItems.forEach(el => {
  //- mouse enter event
  el.addEventListener('mouseenter', function() {

    stopCloseTimeout();
    openDropdown(this);
  }, false);

  //- mouse leave event
  el.addEventListener('mouseleave', () => startCloseTimeout(), false);
});

//- Binding mouse event to each sub menus
menuSubs.forEach(el => {
  el.addEventListener('mouseenter', () => stopCloseTimeout(), false);
  el.addEventListener('mouseleave', () => startCloseTimeout(), false);
});

@import 'https://fonts.googleapis.com/css?family=Karla';
* {
  box-sizing: border-box;
}

body {
  height: 100vh;
  background: linear-gradient(15deg, #25ddf5, #53f);
  font-family: karla;
  color: #666;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #444;
}

header {
  position: relative;
  transform-style: preserve3d;
  perspective: 3000px;
  z-index: 1;
}

.menu {
  list-style: none;
  margin: 0;
  padding-left: 0;
  display: flex;
  justify-content: center;
  z-index: 1;
}

.menu a {
  padding: 20px 20px;
  display: block;
  text-decoration: none;
  color: white;
}

.menu__item {
  position: relative;
  z-index: 1;
}

.menu__item:hover>.sub-menu-shadow {
  display: block;
}

.menu .sub-menu-shadow {
  position: absolute;
  display: none;
}

.dropdown-holder {
  position: absolute;
  width: 100%;
  left: 0;
  top: 100%;
  z-index: 1;
}

.dropdown__bg,
.dropdown__arrow {
  position: absolute;
}

.dropdown__arrow {
  width: 0;
  height: 0;
  border-width: 10px;
  border-style: solid;
  border-color: transparent transparent white;
  top: -20px;
  opacity: 0;
  transition: 0.2s ease;
  pointer-events: none;
}

.dropdown__bg {
  width: 450px;
  height: 400px;
  background-color: white;
  opacity: 0;
  transition: 0.25s ease;
  border-radius: 5px;
  overflow: hidden;
}

.dropdown__bg-bottom {
  background-color: #fafafa;
  position: absolute;
  width: 100%;
  left: 0;
  top: 300px;
  height: 700px;
  transition: 0.3s ease;
}

.dropdown__wrap {
  overflow: hidden;
  position: absolute;
  transition: 0.25s ease;
  z-index: 1;
}

.dropdown__wrap .top-section,
.dropdown__wrap .bottom-section {
  padding: 20px;
}

.dropdown-menu__content {
  text-align: center;
  position: absolute;
  opacity: 0;
  transition: 0.25s ease;
  min-width: 50px;
  z-index: 1;
}

.dropdown-menu__content ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.dropdown-menu__content a {
  color: black;
  text-decoration: none;
  display: block;
  padding: 5px 0;
}

.dropdown-menu__content h3 {
  color: blue;
}

.dropdown-menu__content a:hover {
  color: #333;
}

.dropdown-menu.active .dropdown-menu__content {
  opacity: 1;
}

#opere .dropdown-menu__content,
#vita .dropdown-menu__content,
#curiosità .dropdown-menu__content {
  width: 640px;
}

.col {
  display: flex;
}

.col>ul,
.col>div {
  flex: 1 0 150px;
}

.menu-title {
  margin: 0 0 10px;
  font-size: 18px;
  color: #2196F3;
}


/* TITOLO*/

@import url('https://fonts.googleapis.com/css?family=Righteous');
@keyframes fadeInRight {
  0% {
    left: 100%
  }
  100% {
    left: 50%
  }
}

@keyframes fadeInBottom {
  0% {
    top: 100%
  }
  100% {
    top: 50%
  }
}

.title {
  position: relative;
  margin: 0;
  padding: 0;
  font-family: 'sans-serif';
  font-size: 5em;
  line-height: 1em;
  width: 100vw;
  height: 94vh;
  color: #fafafa;
  animation-delay: 3s;
  animation: colorFlip 3.5s infinite;
  overflow: hidden;
  bottom: 60px;
}

.from-right,
.from-bottom {
  position: absolute;
  width: 10em;
  height: 2em;
  margin-left: -5em;
  left: 50%;
  top: 50%;
  text-align: center;
}

.from-right {
  margin-top: -1em;
  animation: fadeInRight 2s 1;
}

.from-bottom {
  animation: fadeInBottom 2s 1;
}

.jamesjoyce {
  position: absolute;
  width: 100%;
  height: 100%;
}

.fotojoyce {
  width: 40%;
  height: 40%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 0;
}

.container2 {
  position: relative;
  width: 100%;
  height: 100%;
}

.curiosita {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  height: 60%;
  width: 80%;
  color: black;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>James Joyce</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
  <link rel="stylesheet" href="./style.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>
</head>
<!-- partial:index.partial.html -->
<header class="main-header">
  <ul class="menu">
    <div class="jamesjoyce">
      <li><a href="./index.html">James Joyce</a></li>
    </div>

    <li class="menu__item" data-sub="vita"><a>Vita</a></li>
    <li class="menu__item" data-sub="opere"><a>Opere</a></li>
    <li class="menu__item" data-sub="curiosità"><a>Curiosità</a></li>
  </ul>
  <div class="dropdown-holder">
    <div class="dropdown__arrow"></div>
    <div class="dropdown__bg">
      <div class="dropdown__bg-bottom"></div>
    </div>

    <div class="dropdown__wrap">

      <!-- VITA-->
      <div class="dropdown-menu" id="vita" data-sub="vita">
        <div class="dropdown-menu__content" id="vita" data-sub="vita">
          <div class="top-section">
            <div class="col">
              <ul>
                <li>
                  <a href="./vita/trieste.html">
                    <h3>Trieste</h3>
                    <p> Trieste was an important meeting point for several writers, including: Italo Svevo and James Joyce</p>
                  </a>
                </li>
                <li>
                  <a href="./vita/svevo.html">
                    <h3>Svevo</h3>
                    <p>The friendship between Svevo and Joyce began when Svevo decided to follow the lessons of the then beginner teacher, Joyce. From there was born a wonderful friendship that lasted for years</p>
                  </a>
                </li>
                <li>
                  <a href="./vita/studi.html">
                    <h3>Education</h3>
                    <p>Joyce signed up at University College Dublin in 1898, where he studied modern languages. Later he taught at the Berlitz School in Trieste</p>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="bottom-section">
          </div>
        </div>
      </div>


      <!-- OPERE-->
      <div class="dropdown-menu" id="opere" data-sub="opere">
        <div class="dropdown-menu__content" id="opere" data-sub="opere">
          <div class="top-section">
            <div class="col">
              <ul>
                <li>
                  <a href="./opere/theDubliners.html">
                    <h3>The Dubliners</h3>
                    <p> Dubliners is a collection of 15 short stories set in Dublin, published in 1914. Represent an ideal portrait of the irish capital in the 20 th century</p>
                  </a>
                </li>
                <li>
                  <a href="./opere/ulysses.html">
                    <h3>Ulysses</h3>
                    <p>Ulysses is a long complex novel set in Dublin on one single day and the 18 episodes correspond to Homer's Odyssey</p>
                  </a>
                </li>
                <li>
                  <a href="./opere/finnegansWake.html">
                    <h3>Finnegans Wake</h3>
                    <p> Finnegans Wake is a novel by James Joyce that is known for its difficult and obscure language. The book tells the story of a man named Humphrey and his family</p>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="bottom-section">
          </div>
        </div>
      </div>



      <!-- CURIOSITA'-->
      <div class="dropdown-menu" id="curiosità" data-sub="curiosità">
        <div class="dropdown-menu__content" id="curiosità" data-sub="curiosità">
          <div class="top-section">
            <div class="col">
              <ul>
                <li>
                  <a href="./curiosità/1.html">
                    <h3>Ernest Hemingway was his drinking buddy in Paris.</h3>
                    <p>Having met at Shakespeare and Company, Joyce and Hemingway had quickly become drinking buddies.</p>
                  </a>
                </li>
                <li>
                  <a href="./curiosità/2.html">
                    <h3>He invented a 100-letter word to describe thunder</h3>
                    <p>Joyce invented a word to describe thunder in Finnegans Wake.</p>
                  </a>
                </li>
                <li>
                  <a href="./curiosità/3.html">
                    <h3>Joyce had bad eyesight</h3>
                    <p> Joyce had bad eyesight and was almost blind by the time he died. He had 25 operations on his eyes.</p>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="bottom-section">
          </div>
        </div>
      </div>



    </div>
  </div>
</header>

<body>

  <!--TITOLO-->
  <div class="title">
    <div class="from-right">James</div>
    <div class="from-bottom">Joyce</div>
  </div>

  <div class="container2">
    <img class="fotojoyce" id="joyce" src="img/joyce.png" alt="">
  </div>





  <!-- partial -->
  <script src="./script.js"></script>
  <script src="./fotojoyce.js"></script>


</body>

</html>