Dropdown Menu jumping to the left when toggled (CSS) - html

Question

New member here and also a newcomer to HTML and CSS, I hope you indulge my mistakes.
I have a dropdown menu in CSS (just a burger) aligned on the right, but when I click on it, the burger is on the left. And I just don't know why.
Menu normal/untoggled
Menu when clicked/toggled
Can you help me?
Here is the code:
.navbar {
background-color: #1a1a1a;
width: 100%;
height: 4%;
text-decoration: none;
position: absolute;
float: right;
z-index: 2;
}
.navbar a {
font-size: 16px;
color: #1a1a1a;
text-align: right;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: right;
overflow: hidden;
}
.dropdown .dropbtn {
position: static;
width: 35px;
height: 5px;
background-color: white;
margin: 6px 10px;
border: none;
outline: none;
z-index: 30;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
float: none;
/* position: relative; */
background-color: #FFBB00;
}
.dropdown-content {
float: right;
display: none;
background-color: #1a1a1a6c;
min-width: 160px;
}
.dropdown-content a {
float: none;
display: block;
color: white;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: rgba(0, 0, 0, 0.458);
color: #FFBB00;
}
.dropdown:hover .dropdown-content {
float: right;
display: block;
}
<div class="navbar">
<div class="dropdown">
<div class="dropbtn">
</div>
<div class="dropbtn">
</div>
<div class="dropbtn">
</div>
<div class="dropdown-content">
HOME
SHOP
CONTACT
</div>
</div>
I tried to float right and change the position. I tried text align and all that.
I just want the burger to stay on the same place. That's all.
Thank you in advance!