当我将鼠标悬停在范围上时，下拉菜单不显示

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

我希望当我悬停在span上时下拉菜单会显示出来，但是没有出现。我尝试用“div”或“p”替换“span”，但是也不起作用。