сделать выпадающий и выровняться по правой стороне

Question

Я использую это раскрывающееся меню, оно выравнивается по левому краю, но я хочу, чтобы оно спускалось в обратном направлении, потому что оно исчезает с экрана на мобильном телефоне.Я приложил картинки, чтобы показать, что он делает, против того, что я пытаюсь сделать.

<div class='dropdown'>
  <button class='dropbtn'>Hi, Anthony &#9660;</button>
  <div class='dropdown-content'>
  <a href='index.php?c=my-profile'>My Golfer Profile</a>
  <a href='index.php?c=my-schedule'>My Schedule</a>
  <a href='index.php?c=account-settings'>Account Settings</a>
  <div style='width:100%;border-bottom: 1px #000 dotted;'>&nbsp;</div>
  <a href='actions/logout.php'>Logout</a>
  </div>
</div>


.dropbtn {
  background-color: #3D5C7F;
  color: white;
  padding: 12px;
  font-size: 14px;
  border: none;
  cursor: pointer;
  border-radius: 3px;
}
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropdown:hover .dropbtn {
  background-color: #3D5C7F;
}

что он делает

что мне нужно сделать

Answer 1

Поскольку вы не разместили свой HTML-код, я не знаю, какой класс применяется в начальном элементе вашего раскрывающегося списка.Если к начальному элементу выпадающего меню применяется класс dropdown-content, добавьте следующие стили вместе со стилями, которые вы уже применили к классу dropdown-content:

.dropdown-content {
    right: 0;
    left: auto;
}

Если вы также разместите свой HTML, мы могли бы лучшепомощь.

Answer 2

Я не уверен, какой это класс, поэтому я дам вам идею.То, как я это делаю, это то, что я позиционирую раскрывающийся абсолют и устанавливаю относительный родительский элемент.Когда вы делаете это, вы можете дать ему верх и бока.Чтобы достичь своей позиции. Если вы установите относительную позицию для всей навигации, и выпадающий список будет абсолютным, вы можете задать для этого раскрывающегося меню что-то вроде top: 40px, right: -30px ... Надеюсь, что это имеет смысл, если нет, то опубликоватьнемного HTML, и мы заставим его работать.