Пропадает меню при клике на ссылку

Прошу вашей помощи, при клике на ссылку в меню происходит переход по якорю, но пропадает полностью меню вместе с гамбургером.

Само меню

 <div class="home-page__menu" id="nav-icon4">
    <div onclick="myFunction()">
      <span></span>
      <span></span>
      <span></span>
      <p class="sign_in dropbtn dropdown menu-text">Меню</p>
    </div>
    <div id="myDropdown" class="dropdown-content fade">
      <a>Главная</a>
      <a href="#up2">Направления</a>
      <div>Преподаватели</div>
      <div>Абонементы</div>
      <div>Расписание</div>
      <div>Отзывы</div>
      <div>Контакты</div>
    </div>
  </div>

Функция для открытия меню

function myFunction() {
    document.getElementById("myDropdown").classList.toggle("show");
}

Сюда переходит ссылка

<section id="up2" class="home-page__section-2">
      <div class="home-page__section-name">
        <p>Направления и классы</p>
      </div>
</section>

Стили

     #nav-icon4 {
    transition: all 0.4s ease-in-out;
  }

  .fade {
    animation-name: fade;
    animation-duration: 2.5s;
  }

  @keyframes fade {
    from {
      transform: translate(-15%, 0);
    }

    to {
      transform: translate(0, 0);
    }
  }

  .sign_in {
    margin: auto;
  }

  .dropbtn {
    border: none;
    cursor: pointer;
  }

  .dropdown {
    display: inline-block;
  }

  .dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 15%;
  }

  .select-link {
    font-size: 18px;
    text-align: center;
    padding: 20px 0;
  }

  .show {
    display: block;
  }