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.

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!

Try adding position:absolute and right:0 to .fa-bars::before like this:

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-css -->

.fa-bars::before {
    position: absolute;
    right: 0;
}
.fa-bars{
    color: black;
    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)
}

<!-- language: lang-html -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

  <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>

<!-- end snippet -->

I found a solution to do this:

Close the </i> tag immediately after the icon,

and change your CSS selector .fa-bars:hover ul to .fa-bars:hover + div ul

(see also change in .container-navmenu ul to display: none)

good luck!

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.fa-bars{
    color: black;
    float: right;
}
.fa-bars:hover{
    color: rgba(161,51,255,1.00);
}
.fa-bars:hover + div ul{
    display: block;
}
.container-navmenu{
    margin-right: 200px;
    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)
}

<!-- language: lang-html -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div>
  <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>

<!-- end snippet -->

closing the </i> Tag right after the icon, and moving the Icon not by using float: right; but by using position: absolute; top: 30px; right: 20px; in my fa-bars style, I have repositioned the Icon to the Top right, and the List below. To further expand the Solution, you should use a new class in a <div> Tag around the Icon AND the List all together, from whom you can now call a [new class]:hover .container-navmenu ul To keep the List open while ur on the icon AND on the List. If you don't do that, the List will disappear as soon as you leave the Icon. Massive Thanks to everyone that gave me this solution!

The CSS isn't the problem; it's your HTML. The <i> tag may only have phrasing content as children, or it will result in unexpected behavior.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.fa-bars {
  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)
}

<!-- language: lang-html -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css" />

<div>
  <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>

<!-- end snippet -->