Question

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

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

Picture of my links

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>

垂直悬停下拉菜单，其中悬停链接显示在同一列表中

0 个答案: