Html 在边距上悬停时保持悬停状态为on

我希望在边距上悬停时保持悬停状态。当我删除position

absolute

时，一切正常。从技术上讲，一切似乎都很好。有边距的元素位于悬停元素的内部。这是预期的行为吗？如果不是，那么问题到底是什么

.dropbtn{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
边缘顶部：20px；
背景色：#f1f1；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉内容a:悬停{背景色：#ddd；}
.dropdown:hover.dropdown内容{display:block；}
.dropdown:hover.dropbtn{背景色：#3e8e41；}

下拉列表

这是预期的行为。尽管

.dropdown content

是

.dropdown

的子项，但由于

.dropdown content

是绝对定位的，因此它就像漂浮在

.dropdown

之外一样。如果检查浏览器中的

.dropdown

元素，您将看到其大小仅覆盖

.dropbtn

，不包括

.dropdown内容

解决此问题的一种方法是在

上使用填充而不是边距。然而，这将扩大内容的大小，而不会像使用边距那样留下空白

因此，如果您想在按钮和悬停菜单之间保持20px的间距，可以在链接周围添加另一个div：

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <div class="dropdown-inner">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
</div>

实现这一点的一个方法是使用伪元素（：before），这样您就可以在这两个元素的间隙上放置一个不可见的块，这样当您到达下拉列表容器的末尾时，您就不会失去悬停状态


.dropbtn{
背景色：#4CAF50；
颜色：白色；
填充：16px；
字体大小：16px；
边界：无；
显示：块；
}
.下拉列表{
位置：相对位置；
显示：内联块；
}
.下拉列表：在{
内容：“；
位置：绝对位置；
左：0px；
底部：-20px；
显示：无；
垂直对齐：底部对齐；
宽度：100%；
最小宽度：160px；
高度：20px；
背景色：透明；
}
.下拉内容{
显示：无；
位置：绝对位置；
边缘顶部：20px；
背景色：#f1f1；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
z指数：1；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
}
.下拉内容a:悬停{背景色：#ddd；}
.dropdown:hover.dropdown内容{display:block；}
.dropdown:hover:在{display:inline block；}之后
.dropdown:hover.dropbtn{背景色：#3e8e41；}

下拉列表

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    padding-top: 20px;
    min-width: 160px;
    z-index: 1;
}

.dropdown-inner {
    background-color: #f1f1f1;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}