Html 如何使用display:none和display:block使下拉菜单工作？

我有以下html代码：

<li class="profile-dropdown">
  <a href="/profile" class="login-btn">Profil</a>                               
  <ul>
    <li><a href="/">Test1</li>
    <li><a href="/">Test2</li>
    <li><a href="/">Test3</li>
  </ul>
</li>
<li><a href="/profile/logout" class="login-btn">Logout</a></li>

它将成为我网页导航栏的一部分。我想做一个下拉列表，只有当用户将鼠标悬停在其父元素上时才会出现。根据可见性规则，它可以正常工作，延迟应用于悬停动画，因此我可以悬停在ul中隐藏的li元素上，并且它仍然保持可见

不过，只有在我悬停的时候，它看起来才好。没有悬停看起来很可怕，因为当我使用可见性时，我的容器稍微大一点

当我使用display:none而不是visibility:hidden和display:block而不是visibility:visibility时，看起来还可以，但是延迟没有应用，所以我不能将li元素悬停在隐藏的ul中

是否有办法使可见性不影响我的元素的大小，或使延迟与显示规则一起工作？

---

编辑：

请检查片段，我希望这是您正在查找的内容

ul{
列表样式：无；
填充：0；
保证金：0；
显示器：flex；
}
.配置文件下拉列表{
填充物：5px；
边框：1px实心；
位置：相对位置；
}
.配置文件下拉列表{
显示：无；
转换：所有0轻松1；/*延迟1*/
} 
.profile下拉列表：悬停ul{
显示：块；
不透明度：1；
位置：绝对位置；
顶部：30px；
左：10px；
转换延迟：0s；
}

.profile下拉列表{
可见性：隐藏；
不透明度：0；
过渡：可见性0，不透明度0.5线性；
位置：绝对位置；
} 
.profile下拉列表：悬停ul{
能见度：可见；
不透明度：1；
位置：初始；
}

不太可能。使用display:none和display:block时，我无法使悬停动画持续更长时间，因此在我将鼠标悬停在profile下拉元素外后，隐藏元素会立即消失。我添加了两张图片来说明此问题。这就是我要寻找的。谢谢：）所以基本上没有悬停，它和它的父对象在同一个维度上，这就是它占用更多空间的原因，对吗？显示之间的区别：无；和可视性：隐藏；使用可见性时为：隐藏；元素的内容是不可见的，但元素保持在其原始位置和大小，但使用display时：无；元素已完全删除。要在可见后删除元素的大小，请执行以下操作：隐藏；我使用的位置：绝对；这会使元素相对于其第一个定位（非静态）的祖先元素进行定位，并且当用户悬停鼠标时，元素的位置会再次设置回初始位置到其实际位置

.profile-dropdown ul {
  visibility: hidden;
  opacity: 0;

  transition: all 0s ease 1s; /*delay 1s*/
} 
.profile-dropdown:hover ul { 
  visibility: visible;
  opacity: 1;

  position: absolute;
  top: 58px;
  left: -15px;

  transition-delay: 0s;
}