Остановить закрытие субнава при наведении курсора на главное меню и переход на субнав

Question

У меня появляется субнав и фон с полной шириной для субнава, который анимируется при наведении ссылки в основной навигации.Как сохранить вспомогательную навигацию открытой при наведении основной навигации и на субнав.Subnav закрывается, когда вы не находитесь над пунктом главного меню.

                <nav class="header-menu menu">
                <ul>
                    <li class="menu-item-has-children">
                        <a href="#">
                            <span class="nav-text">Expertise</span>
                            <span class="icon-down-arrow-small "></span>
                        </a>

                        <ul class="sub-menu">
                            <li><a href="">Meet our Team</a></li>
                            <li><a href="">Contact Us</a></li>
                            <li><a href="">Our Process</a></li>
                        </ul>

                    </li>
                    <li class="menu-item-has-children">
                        <a href="#">
                            <span class="nav-text">Projects</span>
                            <span class="icon-down-arrow-small "></span>
                        </a>
                        <ul class="sub-menu">
                            <li><a href="">Meet our Team</a></li>
                            <li><a href="">Contact Us</a></li>
                            <li><a href="">Our Process</a></li>
                            <li><a href="">Our Process</a></li>
                            <li><a href="">Our Process</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">About</a>
                    </li>
                    <li>
                        <a href="#">Insights</a>
                    </li>
                    <li>
                        <a href="#">Careers</a>
                    </li>
                </ul>
            </nav>

  $(".nav-text").mouseenter(function(){

                var that = this;
                var subNavHeight = $(that).parent().siblings('.sub-menu').outerHeight();

                $(that).parent().parent().siblings().children('.sub-menu').stop().animate({opacity: 0}, 100);// fade out all sub-menus


                $('.menu-expand').stop().animate({height:subNavHeight},200, "linear", function(){
                    $(that).parent().siblings('.sub-menu').stop().animate({opacity: 1}, 200);



                });

            });