目前，下拉菜单与父项目文本左对齐.如果菜单栏从屏幕的左侧开始，这是很好的.但是，我的菜单栏从右侧开始，所以文本会从屏幕上消失.如何使下拉菜单与父项的右侧对齐并展开其左侧？
It should drop down like this:
itemA itemB
---------
| |
---------
.nav-section {
margin-left: auto;
margin-right: auto;
max-width: 1440px;
}
.nav {
display: flex;
height: 100%;
position: static;
width: 100%;
z-index: 9999;
}
.nav-item {
padding-left: 4px;
padding-right: 4px;
position: static;
text-align: right;
width: auto;
}
.button-item {
padding-bottom: 2rem;
padding-top: 2rem;
}
.dropdown {
display: none;
}
.nav-item:hover .dropdown {
display: block;
}
.dropdown-menu {
border: solid 1px red;
padding: 2px;
position: absolute;
}<div class="nav-section">
<div class="nav">
<div class="nav-item">
<button class="button-item">Item A</button>
<div class="dropdown">
<div class="dropdown-menu">
<div class="dropdown-item">Item A1</div>
<div class="dropdown-item">Item A2</div>
</div>
</div>
</div>
<div class="nav-item">
<button class="button-item">Item B</button>
<div class="dropdown">
<div class="dropdown-menu">
<div class="dropdown-item">Item B1</div>
<div class="dropdown-item">Item B2</div>
</div>
</div>
</div>
</div>
</div>