Icon just does'nt want to move to the right or clashes with my ul below

I Assume the empty space is a div element, in which there is space to the right As seen in the screen, I just need the Bars-Icon to move to the right side of the div, to be in the Top right corner, and have the ul below. But I've tweaked now for at least an hour and cant seem to find a solution. Thanks for a reply!

HTML:

<div><i class="fa-solid fa-bars fa-3x">
                <div class="container-navmenu">
                    <ul>
                        <li><a href="https://www.playrealm.de/home">Home</a></li>
                        <li><a href="https://www.playrealm.de/wiki">Wiki</a></li>
                        <li><a href="https://www.playrealm.de/shop">Shop</a></li>
                        <li><a href="https://www.playrealm.de/team">Team</a></li>
                        <li><a href="https://www.playrealm.de/news">News</a></li>
                        <li><a href="https://www.playrealm.de/contact">Contact us</a></li>
                    </ul>
                </div>
                </i>
                </div>

Stylesheet:

.fa-bars{
    color: white;
    float: right;
}
.fa-bars:hover{
    color: rgba(161,51,255,1.00);
}
.fa-bars:hover ul{
    display: block;
}
.container-navmenu{
    margin-right: 200px;
    margin-top: 50px;
    float:right;
    text-align: right;
}
.container-navmenu ul{
    display: block;
    position: absolute;
    background-color: #262F3D;
    border-radius: 20px;
    float: right;
}
.container-navmenu ul li{
    list-style: none;
    position: relative;
}
.container-navmenu ul li a{
    font-family: "forma-djr-display", sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: white;
    text-decoration: none;
    padding: 10px;
    display: block;
    transition: all 0.3s ease 0s;
}
.container-navmenu ul li a:hover{
    color: rgba(161,51,255,1.00)
}

I tried tweaking margin & Padding, but the Icon is connected to the List, and therefor it just does nothing to change the relative position of both. I also tried just ending the </i> right after the icon, not including the List, but the outcome is, that I didn't find a way to display the List on Hover, because .fa-bars:hover.container-navmanu ul{display:block} did nothing.

Solution

To move the bars icon to the top right corner of the div, you can try adding the following CSS properties to the .fa-bars class:

.fa-bars {
  color: white;
  position: absolute;
  top: 0;
  right: 0;
}

This will position the icon at the top right corner of the div.

To display the list on hover, you can use:

.fa-bars:hover {
  color: rgba(161, 51, 255, 1.00);
}

.navmenu-container:hover .container-navmenu ul {
  display: block;
}

This will display the ul element when the bars icon is hovered over.

Here's the updated code:

<div class="navmenu-container">
  <i class="fa-solid fa-bars fa-3x"></i>
  <div class="container-navmenu">
    <ul>
      <li><a href="https://www.playrealm.de/home">Home</a></li>
      <li><a href="https://www.playrealm.de/wiki">Wiki</a></li>
      <li><a href="https://www.playrealm.de/shop">Shop</a></li>
      <li><a href="https://www.playrealm.de/team">Team</a></li>
      <li><a href="https://www.playrealm.de/news">News</a></li>
      <li><a href="https://www.playrealm.de/contact">Contact us</a></li>
    </ul>
  </div>
</div>

.navmenu-container {
  position: relative;
  display: inline-block;
}

.fa-bars {
  color: white;
  position: absolute;
  top: 0;
  right: 0;
}

.fa-bars:hover {
  color: rgba(161, 51, 255, 1.00);
}

.navmenu-container:hover .container-navmenu ul {
  display: block;
}

.container-navmenu {
  margin-top: 50px;
  float: right;
  text-align: right;
}

.container-navmenu ul {
  display: none;
  position: absolute;
  background-color: #262F3D;
  border-radius: 20px;
  float: right;
}

.container-navmenu ul li {
  list-style: none;
  position: relative;
}

.container-navmenu ul li a {
  font-family: "forma-djr-display", sans-serif;
  font-weight: 800;
  font-size: 20px;
  color: white;
  text-decoration: none;
  padding: 10px;
  display: block;
  transition: all 0.3s ease 0s;
}

.container-navmenu ul li a:hover {
  color: rgba(161, 51, 255, 1.00)
}

I hope this helps!