After creating a navigation bar with dropdown links, I encountered an issue where hovering over the link to open the drop-down caused it to overflow to the right. Since the button is positioned at the right end of the navbar, it resulted in the scrollbar appearing. How can I adjust the position so that the link in the drop-down starts from the right side?
.navbar {
list-style-type: none;
overflow: hidden;
background: #3498db;
border-bottom: 1px solid #2c3e50;
}
.navbar-item {
float: left;
}
.navbar-item.right {
float: right;
}
.navbar-link {
display: block;
color: #ecf0f1;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar-link:hover, .navbar-link.active, .dropdown-content a:hover, .dropdown-content a.active {
background: #2980b9;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #3498db;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
min-width: 120px;
z-index: 1;
}
.dropdown-content a {
color: #ecf0f1;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 600px) {
.navbar-item.right, .navbar-item {
float: none;
}
}<ul class="navbar">
<li class="navbar-item"><a href="#" class="navbar-link active">Home</a></li>
<li class="navbar-item"><a href="#" class="navbar-link">{PH}</a></li>
<li class="navbar-item"><a href="#" class="navbar-link">{PH}</a></li>
<li class="navbar-item"><a href="#" class="navbar-link">{PH}</a></li>
<li class="navbar-item dropdown">
<a href="javascript:void(0);" class="navbar-link">{PH}</a>
<div class="dropdown-content">
<a href="#">{PH}</a>
<a href="#">{PH}</a>
<a href="#">{PH}</a>
</div>
</li>
<li class="navbar-item dropdown right" id="membersbtn">
<a href="javascript:void(0);" class="navbar-link">Members</a>
<div class="dropdown-content">
<a href="#">Register</a>
<a href="#">Log In</a>
</div>
</li>
</ul>