При наведении на ссылку позиционировать подменю

Вот макет

При наведении на "О компании" подставляется сабменю. Оно позиционируется под край шапки и под наведенную ссылку. Ниже упрощенный код для понимания вопроса.

<ul class="nav">
    <li data-itemindex = "1">
        <a href="#">Недвижимость</a>
    </li>
    <li data-itemindex = "2">
        <a href="#">О компании</a>
    </li>
</ul>

<div class="sub_menu" data-subindex = "1">
    <div class="menu_thumbs">
        <a href="#" class="menu_thumb">
            <div class="menu_thumb_descript">
                <p>О компании</p>
            </div>
        </a>
        <a href="#" class="menu_thumb">
            <div class="menu_thumb_descript">
                <p>Почему мы</p>
            </div>
        </a>
    </div>
</div>

<div class="sub_menu" data-subindex = "2">
    <div class="menu_thumbs">
        <a href="#" class="menu_thumb">
            <div class="menu_thumb_descript">
                <p>О компании</p>
            </div>
        </a>
        <a href="#" class="menu_thumb">
            <div class="menu_thumb_descript">
                <p>Почему мы</p>
            </div>
        </a>
    </div>
</div>

.nav {
    display: flex;
}
.nav li {
    padding: 0 11px;
}
.nav li a {
    font-weight: 500;
    font-size: 14px;
    line-height: 140%;
    color: #0E2141;
}
.sub_menu {
    position: absolute;
    top: 100%;
    left: -999999999px;
    z-index: 10;
    opacity: 0;
    z-index: -10;
}
.sub_menu.visible {
    left: 0
    opacity: 1;
    z-index: 1;
}

И js который нужно доработать

$(".nav li").on("mouseover", function() {
    index = $(this).attr("data-itemindex");
    subMenu = $("[data-subindex = '"+index+"']");
    subMenu.addClass("visible");
});

$(".nav li").on("mouseleave", function() {
    index = $(this).attr("data-itemindex");
    subMenu = $("[data-subindex]");
    subMenu.removeClass("visible");
});

Как сделать так чтобы при наведении на "О компании" сабменю позиционировалось и не убиралось после отвода курсора от ссылки "О компании"?