самозагрузка dropright находится под другими элементами

Question

я добавил элемент dropright в выпадающий класс, чтобы раскрывающееся меню показывалось справа, но я застрял с этой проблемой:

https://ibb.co/D5DGXQm

вы можете увидеть, как выпадающийменю в div, но под основным телом!

вот полный код страницы:

<div class="sidebar">           
    <div class="nav-item dropright">
        <a class="nav-link border-bottom border-warning dropdown-toggle" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span>Comptes</span>
        </a>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </div>

    <div class="nav-item">
    <a class="nav-link border-bottom border-warning {{Request::path()=='/register' ? 'selectioné' : ''}}" href="/register"><span>Ajout Compte</span></a>
    </div>
    <div class="nav-item">
    <a class="nav-link border-bottom border-warning" href="/comptes"><span>Comptes</span></a>
    </div>
    <div class="nav-item">
    <a class="nav-link border-bottom border-warning" href="/telescope" target="_blank"><span>Telescope</span></a>
    </div>
    <div class="nav-item">
    <a class="nav-link border-bottom border-warning" href="/directeur"><span>Directeurs</span></a>
    </div>
    <div class="nav-item">
    <a class="nav-link border-bottom border-warning" href="/directeur/create"><span>Ajout Directeur</span></a>
    </div>

@endsection

стиль:

.sidebar {
  width: 225px;
  background-color: #4b4b4b;
  position: absolute;
  top: 60px;
  bottom: 0;
}

tr:hover {
  background-color: rgba(255, 196, 0, 0.664);
  transition: 0.5s;
}

th {
  font-size: 15px;
  word-spacing: 0px;
}

.sidebar .nav-item:last-child {
  margin-bottom: 1rem;
}

.sidebar .nav-item .nav-link {
  text-align: center;
  padding: 0.75rem 1rem;
  width: 90px;
  cursor: pointer;
}

.sidebar .nav-item .nav-link {
  color: white;
}

.sidebar .nav-item .nav-link:active,
.sidebar .nav-item .nav-link:focus,
.sidebar .nav-item .nav-link:hover {
  color: #ffc400;
  transition: 0.3s;
}

.sidebar.toggled {
  width: 0 !important;
  overflow: hidden;
}

.sidebar .nav-item .nav-link {
  display: block;
  width: 100%;
  text-align: center;
  padding: 0.75rem;
  width: 225px;
}

.sidebar .nav-item .nav-link span {
  font-size: 1.25rem;
  text-align: center;
  text-align: justify;
}

.sidebar .nav-item.dropdown .dropdown-toggle::after {
  display: block;
}

.sidebar.toggled {
  overflow: visible;
  width: 90px !important;
}

.sidebar.toggled .nav-item:last-child {
  margin-bottom: 1rem;
}

.sidebar.toggled .nav-item .nav-link {
  text-align: center;
  padding: 0.75rem 1rem;
  width: 90px;
}

.sidebar.toggled .nav-item .nav-link span {
  font-size: 0.65rem;
  display: block;
}

.sidebar.toggled .nav-item.dropdown .dropdown-toggle::after {
  display: none;
}

.sidebar .nav-item:hover {
  background-color: #2e2e2e;
  transition: 0.5s;
}

.selectioné {
  background-color: #070068;
}

.main {
  width: 100%;
  padding-left: 225px;
  padding-top: 11px;
  padding-bottom: 30px;
}

body {
  position: relative;
  min-height: 100vh;
  padding-bottom: 4.5rem;
}

footer {
  position: absolute;
  border-radius: 12px;
  right: 0;
  bottom: 0;
  width: calc(100% - 225px);
  height: 80px;
  background-color: #e2e2e2;
  text-align: center;
  padding-top: 28px;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}

.container-fluid {
  min-height: 100%;
  position: relative;
}

/*scroll up*/

.scroll-to-top {
  position: fixed;
  right: 15px;
  bottom: 15px;
  display: none;
  width: 50px;
  height: 50px;
  text-align: center;
  color: #fff;
  background: rgba(52, 58, 64, 0.5);
  line-height: 46px;
}

.scroll-to-top:focus,
.scroll-to-top:hover {
  color: white;
}

.scroll-to-top:hover {
  background: #343a40;
}

.scroll-to-top i {
  font-weight: 800;
}

.rounded {
  border-radius: 0.25rem !important;
}

.img-fluid {
  border-radius: 0.3rem;
}

.img-fluid:hover {
  border-color: #ffe604e0;
  box-shadow: 1px -1px 6px 1px rgba(241, 198, 6, 0.918);
  transition: 0.6s;
}

.affect-selector {
  border: 1.75px solid #8f8f8f;
  width: 400px;
  height: 250px;
  overflow-y: scroll;
  border-radius: 3px;
}

.btn-group-vertical {
  width: 200px;
}

.btn-space {
  margin: 10px;
  width: 200px;
}

.choix-district{
  border: 2px solid rgba(219, 219, 219, 0.87);
  width:40%;
  margin:auto;
}

[v-cloak] 
{display: none
}

Я пытался использоватьz-index но не работал!как я могу это исправить?