Неправильная позиция раскрывающегося меню OnClick

Question

Здравствуйте, это ссылка перед кликом. И когда я нажимаю на эту ссылку, эта ссылка go на верхнюю часть страницы, вот так;

Вы можете увидеть разницу. Я также прилагаю код, пожалуйста, проверьте.

Вот то, над чем я работаю;

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

// Close the dropdown if the user clicks outside of it
window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {
  var myDropdown = document.getElementById("myDropdown");
    if (myDropdown.classList.contains('show')) {
      myDropdown.classList.remove('show');
    }
  }
}

.dropdown-content {
  display: none;
  position: relative;
  width: 200px;
  background-color: #FFF;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: #000;
  text-decoration: none;
  display: block;
  padding: 5px 10px;
  font-size: 13px;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.show {display: block;}

Я не знаю, в чем проблема. Пожалуйста, помогите

Answer 1

Вроде бы мелочь, а там вы go. Измените только CSS:

.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  top: 2rem;
  width: 200px;
  background-color: #FFF;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

Абсолютное позиционирование выводит элемент из нормального потока. Вот и все.