dropdown menu appear inside item card in uikit slider?

Question

this part of html and this how it look like , I use uikit slider dropdown appear inside card .I try using poistion :absolute with z-index but no benefit still appear inside card.If i use position :relative the card expand . which position shoud i apply.

            <div uk-slider>
               <div class="uk-position-relative">
                  <div class="uk-slider-container uk-light">
                     <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@s uk-child-width-1-3@m " tabindex="-1">
                        <li class="uk-active">
                           <div class="uk-card uk-card-default  sub0-border">
                              <div>
                                 <div class="uk-card-body">
                                    <h5 class="uk-card-title">
                                       <span class="session-name">Session1</span>
                                       <span class="subject-name  ">English</span>
                                       <span class="btn-option" aria-expanded="false">
                                       <i class="icon-feather-more-vertical"></i>
                                       </span>
                                       <div class="dropdown-option-nav uk-dropdown uk-dropdown-bottom-right" style="left: 83.53px; top: 52.8px;" uk-dropdown="pos: bottom-right ;mode : hover">
                                          <ul>
                                             <li>
                                                <span>
                                                <img class="mr-2 h-25" src="~/wwwroot/assets/images/time-management2x.png" />
                                                Content
                                                </span>
                                             </li>
                                             <li>
                                                <span>
                                                <img class="mr-2 h-25" src="~/wwwroot/assets/images/time-management2x.png" />
                                                Students Groups
                                                </span>
                                             </li>
                                             <li>
                                                <span>
                                                <img class="mr-2 h-25" src="~/wwwroot/assets/images/time-management2x.png" />
                                                assignments
                                                </span>
                                             </li>
                                             <li>
                                                <span>
                                                <img class="mr-2 h-25" src="~/wwwroot/assets/images/time-management2x.png" />
                                                Exams
                                                </span>
                                             </li>
                                          </ul>
                                       </div>
                                    </h5>
                                 </div>
                              </div>
                           </div>
                        </li>
                     </ul>
                  </div>
               </div>
            </div>