下拉菜单不适用于带sass的bootstrap4

我已经为bootstrap4编写了以下代码，但是切换功能不起作用

<li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Template</a>
                                <div class="dropdown-menu">
                                        <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 class="dropdown-divider"></div>
                                        <a class="dropdown-item" href="#">Separated link</a>
                                </div>
  </li>

---

您可以使用简单的scss代码在悬停状态下切换

.dropdown{
    &:hover{
       .dropdown-menu{
           visibility: visible;
           opacity: 1;
           overflow: visible;
       }
    }
}
.dropdown-menu{
    visibility: hidden;
    opacity: 0;
    overflow: hidden;
}

---

不工作覆盖的样式不适用您需要提供一些解释

can anyone letme know any help would be appreciated

.dropdown{
    &:hover{
       .dropdown-menu{
           visibility: visible;
           opacity: 1;
           overflow: visible;
       }
    }
}
.dropdown-menu{
    visibility: hidden;
    opacity: 0;
    overflow: hidden;
}

.dropdown {
 &:hover{
 .dropdown-menu-mn{
   @extend .dropdown-menu;
     display: block;
     opacity: 1;
     overflow: visible;
   }
   }
  }
  .dropdown-menu-mn{
  @extend .dropdown-menu;
  display: none;
  opacity: 0;
  overflow: hidden;
  }