WordPress – Creating a a full width dropwdown menu that is not nested in the navigation

I am trying to create a full width dropdown menu that is independent of the navigation, but is triggered by the one of the navigation items.

I am using the bootstrap accordion component to open and close the dropdown menu. The issue I am facing is that I can open the dropwdown menu and have it close when I leave the menu are using mouseLeave to collapse the accordion, and this works fine, but when I am only hovering through the menu items I need the dropdown menu to close when I leave that specific menu item. It stays open until the mouse leaves the actual menu itself, but I need it to open/close on hover and remain open when I want to hover over the drop down menu.

Any ideas on how I can achieve this functionailty? or maybe how to re approach this situation?

The navigation menu is generated so I do not really know add classes or any markup to the menu item that is triggering the menu to open.

here’s a link to the staging site. http://cohenplastic.staging.wpengine.com/
the effect will happen when you hover over the procedures menu button.

Here is the code for the menu

<div id="mega-drop" class="wrapper">
<div id="collapseOne" class="panel-collapse collapse rows dent-menu one" role="tabpanel" aria-labelledby="headingOne">
<div class='container'><div class='content'>          
    <div class='row'>
        <div class="col-md-2">
            <h2>Face</h2>
            <ul>
                <li><a href="/procedures/face-procedures/facelift">Face Lift</a></li>
                <li><a href="/procedures/face-procedures/neck-lift">Neck Lift</a></li>
                <li><a href="/procedures/face-procedures/blepharoplasty">Blepharoplasty</a></li>
                <li><a href="/procedures/face-procedures/browlift-chin-augmentation">Brow Lift</a></li>
                <li><a href="/procedures/face-procedures/browlift-chin-augmentation/#chin-augmentation">Chin Augmentation</a></li>
                <li><a href="/procedures/face-procedures/otoplasty-pediatric-plastic-surgery">Otoplasty</a></li>
                <li><a href="/procedures/face-procedures/fat-grafting">Fat Grafting</a></li>
                <li><a href="/procedures/face-procedures/otoplasty-pediatric-plastic-surgery/#pediatric-plastic-surgery">Pediatric Plastic Surgery</a></li>
            </ul>
        </div>
        <div class="col-md-2">
            <h2>Nose</h2>
            <ul>
                <li><a href="/procedures/nose-procedures/rhinoplasty-nose-surgery">Rhinoplasty</a></li>
            </ul>
        </div>
        <div class="col-md-2">
            <h2>Breast</h2>
            <ul>
                <li><a href="/procedures/breast-procedures/breast-augmentation">Breast Augmentaion</a></li>
                <li><a href="/procedures/breast-procedures/breast-lift-breast-reduction">Breast Lift</a></li>
                <li><a href="/procedures/breast-procedures/breast-lift-breast-reduction/#breast-reduction">Breast Reduction</a></li>
                <li><a href="/procedures/breast-procedures/breast-reconstruction">Breast Reconstruction</a></li>
                <li><a href="/procedures/breast-procedures/male-breast-reduction">Male Breast Reduction</a></li>
            </ul>
        </div>
        <div class="col-md-2">
            <h2>Body</h2>
            <ul>
                <li><a href="/procedures/body-procedures/abdominoplasty-tummy-tuck">Abdominoplasty (Tummy Tuck)</a></li>
                <li><a href="/procedures/body-procedures/arm-lift-brachioplasty">Arm Lift</a></li>
                <li><a href="/procedures/body-procedures/body-contouring-after-weight-loss">Body Contouring after Weight Loss</a></li>
                <li><a href="/procedures/body-procedures/liposuction">Liposuction</a></li>
                <li><a href="/procedures/body-procedures/mommy-makeovers">Mommy Makeovers</a></li>
                <li><a href="/procedures/body-procedures/arm-lift-brachioplasty/#thigh-lift">Thigh Lift</a></li>
            </ul>
        </div>
        <div class="col-md-2">
            <h2>Non-Surgical</h2>
            <ul>
                <li><a href="/procedures/non-surgical-procedures/botox-cosmetic">BOTOX</a></li>
                <li><a href="/procedures/non-surgical-procedures/restylane-juvederm-voluma-radiesse">Restylane</a></li>
                <li><a href="/procedures/non-surgical-procedures/restylane-juvederm-voluma-radiesse/#juvederm">Juvederm & Voluma XC</a></li>
                <li><a href="/procedures/non-surgical-procedures/fraxel-hydrafacial">Fraxel</a></li>
                <li><a href="/procedures/non-surgical-procedures/fraxel-hydrafacial/#hydrafacial">HydraFacial</a></li>
                <li><a href="/procedures/non-surgical-procedures/scar-revision-skin-cancer-excision-reconstruction">Scar Revision</a></li>
                <li><a href="/procedures/non-surgical-procedures/scar-revision-skin-cancer-excision-reconstruction#skin-cancer">Skin Cancer Excision Reconstruction</a></li>
            </ul>
        </div>
        <div class="col-sm-12 big-butts">
        <a href="/procedures">View All Procedures</a>
        </div>
    </div><!--row-->
 </div><!--content--></div><!--container--></div><!--wrapper--></div>

here is the jquery for what I’ve done so far

jQuery('.menu-item-33').hover(
function(){
    jQuery('#collapseOne').addClass('in');
}

);

jQuery('#collapseOne').mouseleave(function(){
    jQuery(this).collapse('hide');
});