Dropdown Menu+ Mega Menu Display Effect JS File

$(document).ready(function () {
    $(".navbar-toggle").on("click", function () {
        $(this).toggleClass("active");
    });
    
   
    
    $("li.mega_drop_down").hover(function(){
        $(".sf-mega").css('display', 'block');
        }, function(){
        $(".sf-mega").css('display', 'none');

    }); 
    
    $(".sf-mega").hover(function(){
        $(".sf-mega").css('display', 'block');
        }, function(){
        $(".sf-mega").css('display', 'none');

    });
    
    $(".sf-mega").hover(function(){
        $("li.mega_drop_down a").css('background', '#0078D2');
        }, function(){
        $("li.mega_drop_down a").css('background', 'inherit');

    }); 
    

});

Dropdown+Mega Menu CSS Code

#menu_container {display: none}
.navbar-fixed-top, .navbar-fixed-bottom {
margin-bottom: 0;
position: relative;
}
.header_menu_area {
  background: #0054a6 none repeat scroll 0 0;
}
.navbar-inverse .navbar-brand {
  color: #999;
  display: none;
}


.navbar-inverse {
  background-color: #0054a6;
  border-color: #0078D2;
}
.navbar-inverse .navbar-nav li {position: relative;}
.navbar-inverse .navbar-nav li a {background-color: #0054a6;
color: #fff;
font-size: 16px;
padding: 15px 30px;position: relative}
.navbar-inverse .navbar-nav li:hover a {background-color: #0078D2!important}
.navbar-inverse .navbar-nav li.active a {background-color: #0054a6;}

.navbar-inverse .navbar-nav li ul {background: #0078d2 none repeat scroll 0 0 !important;
left: -99999px;
list-style: outside none none;
padding-left: 0;
position: absolute;
top: 50px;
width: 300px;
z-index: 999;}
.navbar-inverse .navbar-nav li:hover ul {left: 0px}
.navbar-inverse .navbar-nav li ul li {}
.navbar-inverse .navbar-nav li ul li a {background: #0078d2 none repeat scroll 0 0;
display: block;}
.navbar-inverse .navbar-nav li ul li a:hover {background: #0054A6!important}
.navbar-nav .sf-mega {
background: #0078d2 none repeat scroll 0 0;
left: 0px;
padding: 15px;
position: absolute;
top: 52px;
    display: none;
}
.navbar-inverse .navbar-nav li.mega_drop_down:hover .sf-mega {left: 0px}
.sf-mega ul {
  list-style: outside none none;
  padding-left: 0;
}
.sf-mega ul.mega_submenu li a {
background: #0078d2 none repeat scroll 0 0;
border-bottom: 1px dotted;
display: block;
font-size: 15px;
padding-left: 5px;
}
.sf-mega ul.mega_submenu li a:hover {background: #0054A6!important}
.sf-mega p {
  color: #fff;
  font-size: 16px;
}

.navbar-inverse .navbar-nav li.normal_drop_down a::after, .navbar-inverse .navbar-nav li.mega_drop_down a::after {
color: #fff;
content:"\f0d7";
display: inline-block;
font-family: FontAwesome;
padding-left: 15px;
vertical-align: middle;
}
.navbar-inverse .navbar-nav li.normal_drop_down ul li a::after, .navbar-inverse .navbar-nav li.mega_drop_down ul li a::after {
    content:"";
    display: none
}



.navbar-toggle .icon-bar:nth-of-type(2) {
    top: 1px;
}

.navbar-toggle .icon-bar:nth-of-type(3) {
    top: 2px;
}

.navbar-toggle .icon-bar {
    position: relative;
    transition: all 500ms ease-in-out;
}

.navbar-toggle.active .icon-bar:nth-of-type(1) {
    top: 6px;
    transform: rotate(45deg);
}

.navbar-toggle.active .icon-bar:nth-of-type(2) {
    background-color: transparent;
}

.navbar-toggle.active .icon-bar:nth-of-type(3) {
    top: -6px;
    transform: rotate(-45deg);
}

HTML Code Example

<div class="header_menu_area">
    <div class="container">
        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><img src="img/logo.svg" alt=""></a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a>
                    </li>
                    <li><a href="join.html">Join the Network</a>
                    </li>
                    <li class="normal_drop_down"><a href="">Forms &amp; Manuals</a>
                        <ul>
                            <li><a href="http://mytnnj.com/pdf/nj_patient_intake_form.pdf">Intake</a>
                            </li>
                            <li><a href="http://mytnnj.com/pdf/nj_patient_splint_form.pdf">Splint</a>
                            </li>
                            <li><a href="http://mytnnj.com/pdf/nj_upgrade_request_form.pdf">Upgrade</a>
                            </li>
                            <li><a href="http://mytnga.com/pdf/web-portal-access.pdf">Web Portal Access Form</a>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">Newsletters</a>
                    </li>
                    <li class="mega_drop_down"><a href="">Contact Us</a>
                    </li>
                    <div class="sf-mega">
                        <div class="col-md-4 col-sm-6">
                            <h5>Important Information</h5>
                            <p>For verification of Eligibility and Member Services, please contact the member’s health plan.</p>

                        </div>
                        <div class="col-md-2">
                            <h5>Main Numbers</h5>
                            <ul class="mega_submenu">
                                <li><a href="#">1-855-7818</a>
                                </li>
                                <li><a href="#">305-614-0119</a>
                                </li>

                            </ul>
                        </div>
                        <div class="col-md-2">
                            <h5>Claims</h5>
                            <ul class="mega_submenu">
                                <li><a href="#">1-877-372-1273</a>
                                </li>
                            </ul>
                        </div>

                        <div class="col-md-2">
                            <h5>Provider Relations</h5>
                            <ul class="mega_submenu">
                                <li><a href="#">1-855-7818</a>
                                </li>
                                <li><a href="#">305-614-0119</a>
                                </li>
                                <li><a href="#">Fax: 1-877-403-5544</a>
                                </li>
                            </ul>
                        </div>

                        <div class="col-md-2">
                            <h5>Referral &amp; Auth</h5>
                            <ul class="mega_submenu">
                                <li><a href="#">1-855-825-7818</a>
                                </li>
                                <li><a href="#">Fax: 1-855-825-7820</a>
                                </li>
                            </ul>
                        </div>

                    </div>
                </ul>
            </div>
        </div>
    </div>
</div>