下拉并在右侧对齐

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;
}

what it does

what I need it to do

Answer 1

我不确定是哪个班，所以我给你个主意。我这样做的方式是，我放置下拉列表的绝对位置，并放置相对的父元素。执行此操作时，可以给它顶部和侧面。为了获得您的位置..如果您将相对位置放在整个导航中，并且下拉列表将是绝对的，则可以给下拉列表类似top: 40px，right: -30px ...希望这样有意义，如果没有，请发布一些HTML，我们将使其正常工作。

Answer 2

由于您未发布HTML代码，因此我不知道下拉菜单的开始元素上应用了哪个类。如果将dropdown-content类应用于下拉菜单的开始元素，请添加以下样式以及已经应用于类dropdown-content的样式：

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

如果您也要发布HTML，我们会更好地提供帮助。