1

我对编码非常陌生，我想知道您是否可以帮助我解决这个问题。

我正在尝试创建一个下拉菜单，当您将鼠标悬停在垂直链接列表中的“流放”链接上时，该菜单会出现。链接的垂直列表很简单，看起来像附上的照片。当您将鼠标悬停在“流放”上时，我希望两个新链接出现在列表中，并且我已经能够使用悬停功能完成此操作。问题是：虽然当我将鼠标悬停在流放上时会出现两个新链接，但我需要将“今天”链接向下移动，以便链接在悬停时彼此重叠显示。我假设它使用javascript。谁能指出我正确的方向？

我的链接图片

li {
  display: block;
  line-height: 1.5;
}

.dropdown {
  position: relative;
}

.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

a.link-dropdown {
  font-size: 13px;
  color: #999999;
  line-height: 1;
}
<div class="sidebar">
  <h1><a href="index.html">Relatos trans</a></h1>

  <li><a href="1introduction.html">Introduction</a></li>
  <br />

  <li class="stories-of"><a href="1age.html">Coming of age</a></li>
  <li class="stories-of"><a href="4arrest.html">Arrest and incarceration</a></li>
  <li class="stories-of"><a href="5theater.html">Theater and performance</a></li>
  <div class="dropdown">
    <li class="stories-of"><a href="2exile.html">Exile</a></li>
    <div class="dropdown-content">
      <li class="stories-of"><a href="2exile.html" class="link-dropdown">Noelia and Carolina</a></li>
      <li class="stories-of"><a href="2exile.html" class="link-dropdown">Other stories of exile</a></li>
    </div>
  </div>
  <li class="stories-of"><a href="6today.html">Today</a></li>
  <br />

  <li><a href="#">Acknowledgements</a></li>
  <li><a href="#">Resources</a></li>
  <br />
</div>

4

0 回答 0