图标只是不想向右移动或与我下面的 ul 冲突

Question

如屏幕中所示，我只需要将 Bars-Icon 移动到 div 的右侧，位于右上角，并在下方显示 ul。但是我现在已经调整了至少一个小时并且似乎无法找到解决方案。 谢谢回复！

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>

样式表：

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

，不包括列表，但结果是，我没有找到在悬停时显示列表的方法，因为

.fa-bars:hover.container-navmanu ul{display:block}

什么也没做。

Answer 1

要将条形图标移动到 div 的右上角，您可以尝试将以下 CSS 属性添加到 .fa-bars 类中：

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

这会将图标放置在 div 的右上角。

要在悬停时显示列表，您可以使用相邻的兄弟选择器 (+) 选择紧跟在图标之后的 ul 元素。这是一个例子：

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

当条形图标悬停在上面时，这将显示 ul 元素。

这是更新后的代码：

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

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

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

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

希望对您有所帮助！

Answer 2

尝试在开始标签之后关闭标签：

.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)
}

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