Dropdown stays in the same place

Question

The problem

Hello! I have a problem with my hoverable dropdown menu. It always stays under the first navigation item even though it's not triggered, but it should be under the triggered navigation item (the navigation item on which the mouse pointer is located). How can i how can I fix that? Thanks in advance!

#nav-list {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.nav-item {
  display: inline;
  padding: 0;
}

.nav-item-text {
  padding: 16px;
  margin: 0;
  font-size: 14px;
  font-family: var(--primary-font-stack);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: context-menu;
  display: inline;
  color: var(--on-background);
  opacity: var(--high-emphasis);
}

.nav-item-link {
  padding: 20px;
  margin: 0;
  font-size: 14px;
  font-family: var(--primary-font-stack);
  font-weight: 500;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  display: inline;
  color: var(--on-background);
  opacity: var(--high-emphasis);
}

.nav-item-link:hover {
  opacity: 100%;
  cursor: pointer;
  transition: .2s ease all;
  color: var(--primary);
}

.nav-dropdown {
  display: none;
  opacity: 0;
  position: absolute;
  z-index: 99;
  margin: 3px 0 0 0;
  padding: 15px;
  height: auto;
  min-width: 280px;
  background: var(--background);
  border-radius: 4px;
  border: 2px solid var(--elevation-16dp);
}

.nav-item:hover .nav-dropdown {
  display: block;
  transition: .2s ease all;
  opacity: 100%;
}

<ul id="nav-list">
  <li class="nav-item">
    <p class="nav-item-text">Dropdown Trigger</p>
    <ul class="nav-dropdown">
      <li class="nav-drpdwn-item">
        <p class="nav-drpdwn-item-title">Title A 1</p>
      </li>
      <a class="nav-drpdwn-item-link" href="#">
        <li class="nav-drpdwn-item">Link</li>
      </a>
      <a class="nav-drpdwn-item-link" href="#">
        <li class="nav-drpdwn-item">Link</li>
      </a>
      <hr class="nav-drpdwn-hl">
      <li class="nav-drpdwn-item">
        <p class="nav-drpdwn-item-title">Title</p>
      </li>
      <a class="nav-drpdwn-item-link" href="#">
        <li class="nav-drpdwn-item">Link</li>
      </a>
    </ul>
  </li>
  <li class="nav-item">
    <p class="nav-item-text">Dropdown Trigger</p>
    <ul class="nav-dropdown">
      <li class="nav-drpdwn-item">
        <p class="nav-drpdwn-item-title">Title B 2</p>
      </li>
      <a class="nav-drpdwn-item-link" href="#">
        <li class="nav-drpdwn-item">Link</li>
      </a>
      <a class="nav-drpdwn-item-link" href="#">
        <li class="nav-drpdwn-item">Link</li>
      </a>
      <hr class="nav-drpdwn-hl">
      <li class="nav-drpdwn-item">
        <p class="nav-drpdwn-item-title">Title</p>
      </li>
      <a class="nav-drpdwn-item-link" href="#">
        <li class="nav-drpdwn-item">Link</li>
      </a>
    </ul>
  </li>
</ul>

Answer 1

You have to add this css to your code:

<style>
    #nav-list > li {
        position:relative;
    }
    #nav-list .nav-dropdown {
        left: 0;
    }
</style>