Styjun

i added the dropright element to dropdown class so that the dropdown-menu show on the right but i get stuck with this problem :

https://ibb.co/D5DGXQm

you cansee how the dropdown-menu is in the div but under the main body !

here is the full page code :

<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

style :

.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

I've tried to use z-index but did not work !
how do i fix this ?