why the dropdown menu is not showing when I hover on the span?

December 12, 2022

the dropdown menu is not showing when I hover on the span

.user {
  position: relative;
  top: 9px;
  margin-left: 50px;
}

.user .user-name {
  position: relative;
  top: -20px;
  margin-left: 25px;
  color: #1E1E2D;
}

.user .user-name::before {
  content: "";
  border: 5px solid transparent;
  width: 5px;
  height: 10px;
  border-top-color: black;
  position: relative;
  top: 14px;
  left: -3px;
}

.user span:hover .user-list {
  display: block;
}

.user ul {
  position: absolute;
  background-color: white;
  top: 45px;
  left: 70px;
  width: 200px;
  padding: 18px;
  box-shadow: -6px 13px 20px 8px #eee;
  display: none;
  list-style-type: none;
  z-index: 1;
}

<div class="nav">
  <div class="user">
    <img src="assest/user.png" alt="" srcset="">
    <span id="show" class="user-name">Name</span>
    <ul class="user-list">
      <li><a href="">Home</a></li>
      <li><a href="">Account</a></li>
      <li><a href="">LogOut</a></li>
    </ul>
  </div>
</div>

I was expecting that the dropdown shows when I hover over the span, but it didn’t happen.
I tried to replace "span" with "div" or "p" but it didn’t work too.

>Solution :

It’s because your .user-list is not inside a span element but inside a div with class .user

if you want to raise the event only when span is hover you can use the sibling selector ~

change

.user span:hover .user-list {

.user span:hover ~ .user-list {

.user span:hover + .user-list {

.user {
  position: relative;
  top: 9px;
  margin-left: 50px;
}

.user .user-name {
  position: relative;
  top: -20px;
  margin-left: 25px;
  color: #1E1E2D;
}

.user .user-name::before {
  content: "";
  border: 5px solid transparent;
  width: 5px;
  height: 10px;
  border-top-color: black;
  position: relative;
  top: 14px;
  left: -3px;
}

.user span:hover ~ .user-list {
  display: block;
}

.user ul {
  position: absolute;
  background-color: white;
  top: 45px;
  left: 70px;
  width: 200px;
  padding: 18px;
  box-shadow: -6px 13px 20px 8px #eee;
  display: none;
  list-style-type: none;
  z-index: 1;
}

<div class="nav">
  <div class="user">
    <img src="assest/user.png" alt="" srcset="">
    <span id="show" class="user-name">Name</span>
    <ul class="user-list">
      <li><a href="">Home</a></li>
      <li><a href="">Account</a></li>
      <li><a href="">LogOut</a></li>
    </ul>
  </div>
</div>