Mega-Menu how to make tabs work?

.navbar .mega-dropdown {
position: static !important; }

.navbar .dropdown-menu.mega-menu {
width: 100%;
border: none;
border-radius: 0; }
.navbar .dropdown-menu.mega-menu a.news-title {
font-weight: 500;
font-size: 1.1rem;
line-height: 1.5;
-webkit-transition: .2s;
transition: .2s;
color: #4f4f4f !important; }
.navbar .dropdown-menu.mega-menu a.news-title:hover {
color: #2196f3 !important; }
.navbar .dropdown-menu.mega-menu a.news-title.smaller {
font-weight: 400;
font-size: 1rem;
line-height: 1.4; }
.navbar .dropdown-menu.mega-menu .sub-menu a.menu-item {
color: #4f4f4f !important; }
.navbar .dropdown-menu.mega-menu .sub-menu a.menu-item:hover {
color: #4f4f4f !important; }
.navbar .dropdown-menu.mega-menu .news-single {
margin-bottom: 1.2rem;
border-bottom: 1px solid #e0e0e0; }
.navbar .dropdown-menu.mega-menu .sub-title {
padding-bottom: 0.5rem;
margin-bottom: 1rem;
border-bottom: 1px solid #e0e0e0; }
.navbar .dropdown-menu.mega-menu .p-sm {
padding-bottom: 17px; }
.navbar .dropdown-menu.mega-menu .m-sm {
margin-bottom: -5px;
font-size: 0.85rem;
color: #2196f3 !important; }
.navbar .dropdown-menu.mega-menu .m-sm:hover {
color: #2196f3 !important; }
.navbar .dropdown-menu.mega-menu .mt-sm {
margin-top: -3px; }
.navbar .dropdown-menu.mega-menu .font-small {
font-size: 0.85rem; }

<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-light white">

<!-- Collapse button -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>

<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">

<!-- Links -->
<ul class="navbar-nav mr-auto">
<!-- Dropdown -->
<li class="nav-item dropdown mega-dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">News </a>
<div class="dropdown-menu mega-menu row z-depth-1" aria-labelledby="navbarDropdownMenuLink">
<!-- Nav tabs -->
<div class="row">
<div class="col-md-3">
<ul class="nav md-pills pills-primary flex-column" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#panel21" role="tab">Downloads
<i class="fa fa-download ml-2"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel22" role="tab">Orders & invoices
<i class="fa fa-file-text ml-2"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel23" role="tab">Billing details
<i class="fa fa-address-card ml-2"></i>
</a>
</li>
</ul>
</div>
<div class="col-md-9">
<!-- Tab panels -->
<div class="tab-content vertical">
<!--Panel 1-->
<div class="tab-pane fade in show active" id="panel21" role="tabpanel">

<h5 class="my-2 h5">Panel 1</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat nostrum, quia consequatur magnam earum. Facere eum veritatis fuga sint, ipsa reiciendis praesentium, alias consequuntur eveniet assumenda dolore, delectus quam atque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat nostrum, quia consequatur magnam earum. Facere eum veritatis fuga sint, ipsa reiciendis praesentium, alias consequuntur eveniet assumenda dolore, delectus quam atque.</p>

</div>
<!--/.Panel 1-->

<!--Panel 2-->
<div class="tab-pane fade" id="panel22" role="tabpanel">

<h5 class="my-2 h5">Panel 2</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat nostrum, quia consequatur magnam earum. Facere eum veritatis fuga sint, ipsa reiciendis praesentium, alias consequuntur eveniet assumenda dolore, delectus quam atque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat nostrum, quia consequatur magnam earum. Facere eum veritatis fuga sint, ipsa reiciendis praesentium, alias consequuntur eveniet assumenda dolore, delectus quam atque.</p>

</div>
<!--/.Panel 2-->
<!--Panel 3-->
<div class="tab-pane fade" id="panel23" role="tabpanel">

<h5 class="my-2 h5">Panel 3</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat nostrum, quia consequatur magnam earum. Facere eum veritatis fuga sint, ipsa reiciendis praesentium, alias consequuntur eveniet assumenda dolore, delectus quam atque.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat nostrum, quia consequatur magnam earum. Facere eum veritatis fuga sint, ipsa reiciendis praesentium, alias consequuntur eveniet assumenda dolore, delectus quam atque.</p>

</div>
<!--/.Panel 3-->
</div>
</div>
</div>
<!-- Nav tabs -->
</div>
</li>
</ul>
<!-- Links -->

<!-- Links -->
<ul class="navbar-nav nav-flex-icons ml-auto">
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a>
</li>
</ul>
<!-- Links -->

</div>
<!-- Collapsible content -->

</nav>
<!--/.Navbar-->

$('.nav.md-pills > li > a').hover(function() {
$(this).tab('show');
});

$('.nav-item.dropdown.mega-dropdown').on('click', function(event){
var events = $._data(document, 'events') || {};
events = events.click || [];
for(var i = 0; i < events.length; i++) {
if(events[i].selector) {

//Check if the clicked element matches the event selector
if($(event.target).is(events[i].selector)) {
events[i].handler.call(event.target, event);
}

// Check if any of the clicked element parents matches the 
// delegated event selector (Emulating propagation)
$(event.target).parents(events[i].selector).each(function(){
events[i].handler.call(this, event);
});
}
}
event.stopPropagation(); //Always stop propagation
});