How to change elements in a navbar in html - html

Question

I made a navigation bar in HTML and trying that the elements of the navigation bar are on the right site. However, the elements are on the right side but in the wrong direction. The direction of the elements is, Kontakt, Über uns, Klimawandel and Home. The direction I will is the reverse of this.
This is the HTML I wrote for the navigation bar:
nav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #96CB49;
}
li {
float: right;
border-right: 1px solid black;
}
.active {
background-color: #254a01;
}
li:last-child {
border-right: none;
}
li a:hover:not(.active) {
background-color: #254a01;
}
li a,
.dropbtn {
display: inline-block;
color: #F9FCEA;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #254a01;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #96CB49;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: #F9FCEA;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #254a01;
}
.dropdown:hover .dropdown-content {
display: block;
}
<nav>
<li><a class="active" href="#home">Home</a></li>
<li class="dropdown">
Klimawandel
<div class="dropdown-content">
Der Klimawandel
Die Ursachen des Klimawandels
Die Auswirkungen des Klimawandels
</div>
</li>
<li>Über uns</li>
<li>Kontakt</li>
<li style="float:left"><a>Logo</a></li>
</nav>

Answer 1

The way to approach this is to make the container float right, and the items inside of it to float left, if you want to use floats for this purpose.
And since you are using float which will cause the element width to depend on its content, you will need to add a wrapper to your <nav> element, that will have the same background color, so that you achieve full width background visually. In my example below, I wrapped the list elements in the <ul>, and made <nav> be the top level container to add the background.
nav {
background-color: #96CB49;
overflow: hidden;
}
ul {
float: right;
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
border-right: 1px solid black;
}
.active {
background-color: #254a01;
}
li:last-child {
border-right: none;
}
li a:hover:not(.active) {
background-color: #254a01;
}
li a,
.dropbtn {
display: inline-block;
color: #F9FCEA;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
background-color: #254a01;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #96CB49;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
color: #F9FCEA;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #254a01;
}
.dropdown:hover .dropdown-content {
display: block;
}
<nav>
<ul>
<li><a class="active" href="#home">Home</a></li>
<li class="dropdown">
Klimawandel
<div class="dropdown-content">
Der Klimawandel
Die Ursachen des Klimawandels
Die Auswirkungen des Klimawandels
</div>
</li>
<li>Über uns</li>
<li>Kontakt</li>
<li style="float:left"><a>Logo</a></li>
</ul>
</nav>
However, today there are more effective approaches to doing layout in CSS, such as flex-box which would make your task very easy:
ul {
background: green;
display: flex;
list-style: none;
justify-content: end;
}
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>