Убрать второй уровень меню при наведение на 3 уровень

У меня есть такое меню меню открывается при клике на него и закрывается тоже при клике, проблема в том, что мне нужно закрывать его так-же при наводке. Допустим мышка навелась на саб меню, открылись части, как только мышка выйдет за сабменю, то должно закрыться и сабменю и все части или же другими словами 3 уровень, на данный момент у меня закрывается только 3 уровень без 2 уровня когда мышка покидает область 3 уровня меню.

Как можно сделать так, что-бы когда мышка покидала область 3 уровня меню мы бы закрывали одновременно и сабменю.

HTML

   <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton"
                data-mdb-toggle="dropdown" aria-expanded="false">
            Лабораторная номер 2 МЕНЮ
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">

            <li>
                <a class="dropdown-item" href="#">
                    САБМЕНЮ &raquo;
                </a>
                <ul class="dropdown-menu dropdown-submenu">
                    <li>
                        <a class="dropdown-item" href="lab4_1.html">Часть 1</a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="lab4_2.html">Часть 2</a>
                    </li>
                </ul>
            </li>
        </ul>

CSS

.dropdown-menu li {
    position: relative;
}

.dropdown-menu .dropdown-submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -7px;
}

.dropdown-menu .dropdown-submenu-left {
    right: 100%;
    left: auto;
}

.dropdown-menu > li:hover > .dropdown-submenu {
    display: block;
}

Если у кого то есть примеры, то буду рад увидеть. Повторю суть задания - Нужно на клик открывать меню, 2 уровень меню должен открываться при наведение на мышку и когда мышка покидает область мы должны закрывать все меню, так-же можно и закрыть на мышку