html - 无法在下拉列表与其与其他元素重叠的内容之间添加距离

Question

我无法在 About us 之间添加距离和一个没有光标的导航选项卡，当它悬停在 About us 上时无法到达该选项卡面板。

我尝试附加 margin-top:;和 margin-bottom:;但没有得到返回。 另外，我故意没有删除 <hr>标签，因为保留它们是必须的，我预感它们可能会阻止我的意图发生。

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

.dropdown .list {
  padding: 15px;
  border: 10px solid transparent;
  color: black;
  text-decoration: none;
}

.dropdown .dropcontent {
  display: none;
  background-color: white;
  position: absolute;
  border: 1px solid;
}

.dropdown .dropcontent a {
  display: block;
  padding: 10px;
  min-width: 150px;
  text-decoration: none;
  color: black;
}

.dropdown:hover .dropcontent {
  display: block;
}

<hr>
<div class="navbar">
  <div class="dropdown">
    <a href="#" class="list">About us</a>
    <div class="dropcontent">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
</div>
<hr>

Answer 1

您可以将position: absolute 和top: 47px 添加到.dropcontain

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

.dropdown .list {
  padding: 15px;
  border: 10px solid transparent;
  color: black;
  text-decoration: none;
}

.dropdown .dropcontent {
  display: none;
  background-color: white;
  position: absolute;
  border: 1px solid;
  position: absolute;
  top: 47px;
}

.dropdown .dropcontent a {
  display: block;
  padding: 10px;
  min-width: 150px;
  text-decoration: none;
  color: black;
}

.dropdown:hover .dropcontent {
  display: block;
}

<hr>
<div class="navbar">
  <div class="dropdown">
    <a href="#" class="list">About us</a>
    <div class="dropcontent">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
</div>
<hr>