vertical hover drop down menu with hover links appearing in same list

Question

I'm super new to coding, and I'm wondering if you can help me out with this.

I'm trying to create a drop down menu that appears when you hover over a link "Exile" in a vertical list of links. The vertical list of links is simple and looks like the photo attached. I want two new links to appear in the list when you hover over "Exile," and I've been able to accomplish this using the hover feature. The problem is: although the two new links appear when I hover over exile, I need the "Today" link to move down so that the links are displaying ontop of each other in the hover. I'm assuming it uses javascript. Can anyone point me in the right direction?

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>