Simple supplement to Bootstrap 3 navbar. Allows GRAND-CHILD links to be displayed in a mega-menu format. If no grand-child links, then child links are displayed as normal.

meganav.css

/*
Meganav
*/

@media (min-width: 768px) {
	.navbar-brand,
	.navbar-nav .caret {
		display: none
	}
	/* Delete the above if you wish to display the caret */
	.navbar-collapse {
		padding-left: 0
	}
	.navbar-nav .open ul {
		display: none
	}
	.navbar-default .navbar-nav > .open > a,
	.navbar-default .navbar-nav > .open > a:hover,
	.navbar-default .navbar-nav > .open > a:focus {
		color: #555;
		background: none
	}
	.navbar-nav > li:hover {
		background: #e7e7e7
	}
	.navbar-inverse .navbar-nav > .open > a,
	.navbar-inverse .navbar-nav > .open > a:hover,
	.navbar-inverse .navbar-nav > .open > a:focus {
		color: #969696;
		background: none
	}
	.navbar-nav .hovernav:hover > .dropdown-menu {
		display: block
	}
	.widget_search {
		float: right;
		margin: 8px 0;
	}
	#searchsubmit {
		margin-bottom: 0;
  	}
}


/*
Meganav
*/
.mega-menu ul a {
	color: #666;
}
.has-children > a {
	font-size: 15px;
	font-weight: bold !important
}
@media (max-width: 767px) {
	.has-children ul {
		display: block !important;
		margin-left: 15px
	}
}
@media (min-width: 768px) {
	.dropdown.mega-menu {
		position: static;
	}
	.mega-menu > .dropdown-menu {
		left: 0;
		right: 0;
		overflow-x: auto
	}
	.mega-menu > ul > li {
	  display:table-cell;
	}
	.mega-menu > ul ul {
		position: relative;
		display: block !important;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		padding: 0
	}
	.has-children {
		border-right: 1px solid #e7e7e7
	}
	.has-children:last-of-type {
		border-right: 0
	}
}

meganav.js

$(document).ready(function() {

  /*
  Meganav
  */
  $('.navbar').addClass('meganav');
  $('.meganav .dropdown-menu .dropdown-menu').parent().addClass('has-children').parents('li').addClass('dropdown mega-menu');
  
});