Bootstrap 4 drop-down menu fade out ( Анимация исчезновения )?

Question

[maksell]

Хочу сделать, чтобы при наведении на кнопку, появлялось все меню.
Пока что нашел только это, но проблема в том, что все меню открывается при наведении на блок с меню, а не на кнопку ( смотрите скриншот)
Есть идеи ребят ?

.d-flex>.dropdown:hover>.dropdown-menu {
    display: block;
    opacity: 1;
 }

 .d-flex>.dropdown>.dropdown-menu {
    display: block;
    opacity: 0;
    -webkit-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
    -ms-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
 }

Основной код ( вырезал без закрывающих тегов)

<div class="d-flex justify-content-center ">
                <div class="nav-item dropdown _megaMenu">
                <button class="btn  dropdown-toggle " style= "display: block" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                РАСПРОДАЖА
                </button>
                    <div class="dropdown-menu mega";>
                        <div class="container">
                            <div class="row">
                                <div class="col-3 pl-4 pb-5">  
                                    <a class="dropdown-item font-weight-bolder">Женщины</a>
                                    <a class="dropdown-item" href="#">Распродажа - Последний шанс <br>купить</a>
                                    <a class="dropdown-item" href="#">Посмотреть все</a>
                                    <a class="dropdown-item" href="#">Платья</a>
                                    <a class="dropdown-item" href="#">Топы</a>