Наведите указатель мыши на Span и переместите изображение

Question

В настоящее время у меня в правом верхнем углу установлено округленное изображение, и у меня не было никаких проблем, пока я не переместил его слева направо. Если вы наведите указатель мыши на промежуток, откроется навигационное меню, но также будет перемещено округленное изображение. Когда он не зависает, он остается в том положении, которое мне нравится. Как я могу это исправить?

CSS

.dropbtn {
  padding: 16px;
  position: relative;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
.dropdown {
  position: relative;
  float: right;
  padding: 10px;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: relative;
  background-color: #f1f1f1;
  min-width: 140px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 10px 14px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {background-color: #ddd}
.show {display:block;}
.rounded-circle {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  display: inline-block;
}

JavaScript

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

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

HTML

<div class="dropdown">
  <span onclick="myFunction()" class="dropbtn"><img class="rounded-circle avatar-align" src="/assets/fallback/default-avatar-3-9fe9418585e4df60d6d1005ccf4f0c8ee871f01710b4d10c496f45b8a0ef9305.png">  </span>
  <div id="myDropdown" class="dropdown-content">
    <a href="/users/sign_in">Log in</a>
    <a href="/users/sign_up">Sign up</a>
  </div>
</div>

Answer 1

Замените ваш .dropdown-content css на следующий.

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 140px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  right:20px
}

Здесь то, что я обновил, заменено position:relative на position:absolute и добавлено right:20px в .dropdown-content классе.

Проверьте рабочий фрагмент.

function myFunction() {
  event.stopPropagation();
  const dropDown = document.getElementById("myDropdown");
  dropDown.classList.contains("show") ?dropDown.classList.remove("show") :dropDown.classList.add("show");
}

window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}

.dropbtn {
  padding: 16px;
  position: relative;
  font-size: 16px;
  border: none;
  z-index:99;
  cursor: pointer;
}

.dropdown {
  position: relative;
  float: right;
  padding: 10px;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 140px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  right:20px
}

.dropdown-content a {
  color: black;
  padding: 10px 14px;
  text-decoration: none;
  display: block;
}

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

.show {
  display: block;
}

.rounded-circle {
  height: 40px;
  width: 40px;
  border-radius: 50%;
  display: inline-block;
}

<div class="dropdown">
  <span onclick="myFunction()" class="dropbtn"><img class="rounded-circle avatar-align" src="https://source.unsplash.com/random/300x300"> </span>
  <div id="myDropdown" class="dropdown-content">
    <a href="/users/sign_in">Log in</a>
    <a href="/users/sign_up">Sign up</a>
  </div>
</div>