HTML & CSS Why this hover in .show_user_section not work and how the drop-top can't work

[Jboy]

My coding Here :
My HTML flie :

<!DOCTYPE html>
<html>
    <head>
        <title>Natural</title>
        <link rel="stylesheet" href="homepage.css">
        <link rel="stylesheet" href="font.css">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="https://cdn.tailwindcss.com"></script>
        <script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp,container-queries"></script>
    </head>
    <body>
    <div class="nagative_bar">
     <div class="logo"></div>
     <div class="user">
        <button class="show_user_section">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
                <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
              </svg>User</button>
        <div class="user_section">
          <a href="#">
            <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
              <path stroke="currentColor" stroke-linecap="square" stroke-linejoin="round" stroke-width="2" d="M10 19H5a1 1 0 0 1-1-1v-1a3 3 0 0 1 3-3h2m10 1a3 3 0 0 1-3 3m3-3a3 3 0 0 0-3-3m3 3h1m-4 3a3 3 0 0 1-3-3m3 3v1m-3-4a3 3 0 0 1 3-3m-3 3h-1m4-3v-1m-2.121 1.879-.707-.707m5.656 5.656-.707-.707m-4.242 0-.707.707m5.656-5.656-.707.707M12 8a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"/>
            </svg>Setting</a>
          <a href="#"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 9h3.75M15 12h3.75M15 15h3.75M4.5 19.5h15a2.25 2.25 0 0 0 2.25-2.25V6.75A2.25 2.25 0 0 0 19.5 4.5h-15a2.25 2.25 0 0 0-2.25 2.25v10.5A2.25 2.25 0 0 0 4.5 19.5Zm6-10.125a1.875 1.875 0 1 1-3.75 0 1.875 1.875 0 0 1 3.75 0Zm1.294 6.336a6.721 6.721 0 0 1-3.17.789 6.721 6.721 0 0 1-3.168-.789 3.376 3.376 0 0 1 6.338 0Z" />
          </svg>Info</a>
          <a href="#"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 9V5.25A2.25 2.25 0 0 1 10.5 3h6a2.25 2.25 0 0 1 2.25 2.25v13.5A2.25 2.25 0 0 1 16.5 21h-6a2.25 2.25 0 0 1-2.25-2.25V15m-3 0-3-3m0 0 3-3m-3 3H15" />
          </svg>
          Log Out</a>
        </div>
     </div>
    </div>
    <script src="homepage.js"></script>
    </body>
</html>

My CSS file :

:root{
  --theme_1: rgb(207, 238, 174);
}
body{
  background-color: rgb(247, 235, 221);
}
.nagative_bar .logo{
    height: 60px;
    width: 60px;
    border-radius: 180px;
    margin-left: 50px;
    background-image: url(CachedImage_1920_1080_POS4.jpg);
    overflow: hidden;
    display: inline-block;
    margin-top: 10px;
}
.nagative_bar{
  width: 99%;
  margin-left: 9px;
  margin-top: 6px;
  height: 80px;
  display: inline-block;
  background-color: var(--theme_1) ;
  border-radius: 10px;
}
.user{
  float: right;
}
.show_user_section{
  width: 160px;
  height: 60px;
  transform: translate(-150px,10px);
  color: rgb(0, 0, 0);
  padding-left: 20px;
}
.user button svg {
  position: absolute;
  left: 35px;
  transition: all 0.25s linear ;
  opacity: 1;
}
.user button:hover svg {
  opacity: 1;
  left: 44px;
}
.user_section{
  display: none;
  overflow: hidden;
  position: absolute;
  top: 88px;
  right: 160px;
  z-index: 1;
}
.user_section a {
  width: 160px;
  height: 60px;
  display: block;
  text-align: center;
  color: black;
  padding-top: 15px;
  padding-left: 15px;
  background-color: var(--theme_1);
  border-radius: 10px;
  margin-top: 5px;
}

.user_section svg {
  position: absolute;
}
//This is the error in
.show_user_section:hover .user_section{
  display: block;
}

 

[Johna]

Hey there.

This code is selecting all .user_section elements that are children of .show_user_section elements:

.show_user_section:hover .user_section {
  display: block;
}

According to the HTML you've posted, .user_section is not a child of .show_user_section, but rather a sibling.

What you should do instead is use the next sibling selector (+):

.show_user_section:hover + .user_section {
  display: block;
}