вертикальное всплывающее меню при наведении ссылки, появляющиеся в том же списке - PullRequest
Новая
       40

вертикальное всплывающее меню при наведении ссылки, появляющиеся в том же списке

1 голос
/ 25 марта 2020

Я очень новичок в кодировании, и мне интересно, можете ли вы помочь мне с этим.

Я пытаюсь создать выпадающее меню, которое появляется при наведении курсора на ссылку «Изгнание» в вертикальном списке ссылок. Вертикальный список ссылок прост и выглядит как прикрепленная фотография. Я хочу, чтобы две новые ссылки появлялись в списке, когда вы наводите курсор мыши на «Изгнание», и я смог выполнить sh, используя функцию наведения. Проблема заключается в том, что хотя две новые ссылки появляются при наведении курсора мыши на ссылку, мне нужно, чтобы ссылка «Сегодня» перемещалась вниз, чтобы ссылки отображались поверх друг друга при наведении. Я предполагаю, что он использует 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>
...