styled-components嵌套组件中DropDown无法显示的问题求助

大家好，我最近在用styled-components开发组件时遇到了个小卡点，想请教下各位大佬的思路。

我写了两个styled组件：UserImg和DropDown，把DropDown嵌套在UserImg里面使用，代码如下：

组件使用代码： #

<UserImg imgUrl={userPhoto}>
  <DropDown>
    <div onClick={handleAuth}>Sign Out</div>
  </DropDown>
</UserImg>

样式定义代码： #

const DropDown = styled.div`
  letter-spacing: 0.2em;
  position: relative;
  top: 7vh;
  left: 23vw;
  border-radius: 2px;
  text-transform: uppercase;
  transition: all 0.5s ease-in;
  border: 2px solid red;
  div {
    padding: 0.3em;
  }
`;

const UserImg = styled.a`
  background-image: url(${(props) => props.imgUrl});
  background-repeat: no-repeat;
  background-size: contain;
  background-position: 30%;
  display: inline-block;
  cursor: pointer;
  position: relative;
  height: 12vh;
  width: 5vw;
  left: 25vw;
  border: 2px solid white;
  border-radius: 50%;
  &:hover {
    ${DropDown} {
      visibility: visible;
      border: 1px solid white;
      border: transparent;
      cursor: pointer;
    }
  }
`;

现在UserImg组件能正常渲染显示，但DropDown组件完全看不到。我原本期望的是，当鼠标悬停在UserImg上时，DropDown能显示出来。

有没有朋友能帮我排查下问题所在，或者给点调试方向呀？

备注：内容来源于stack exchange，提问作者Devansh