这是因为top:30px设置导致两个div之间存在间隙。
将其更改为顶部：100%

.user-data {
  position: relative;
  padding-bottom:1em;
}
.test {
  display: none;
  position: absolute;
  top: 100%;
  border: 1px solid black;
}
.user-data:hover .test {
  display: block;
      }

<div class='user-data'>
  bbbbb
  <div class='test'>
    aaaa
  </div>
</div>

如果需要两个分区之间的额外间距，请将padding-top添加到子元素或padding-bottom添加到父元素。

如果不能应用填充，则可以在伪元素的帮助下完成此操作。不确定这是否适用于所有场景。

.user-data{
  position:relative;
}
.test{
  display:none;
  position:absolute;
  top:30px;
  border:1px solid black;
}
.test::before{
  content: "";
  height: 20px;
  width: 100%;
  position: absolute;
  top: -20px;
  left: 0;
}
.user-data:hover .test{
  display:block;
 
}

<div class='user-data'>
  bbbbb
    <div class='test'>
        aaaa
    </div>
</div>