how to make full width mega menu in bootstrap - html

Question

I want to implement full width mega menu in bootstrap. here is markup for menu:
<nav class="navbar navbar-inverse navbar-static-top">
<div class="container-fluid">
<div class="navbar-header"><a class="navbar-brand" href="#"><b>eTouch</b></a></div>
<div>
<ul class="nav navbar-nav">
<li><a data-toggle="tab" href="#" class="btn"> <span class="glyphicon glyphicon-home"></span> </a>
<ul class="dropdown-menu mega-dropdown-menu row">
<div class="megamenu-headline"><h2>ODC VEGETABLES STORE</h2></div>
<li class="divider"></li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Dresses</li>
<li>Unique Features</li>
<li>Image Responsive</li>
<li>Auto Carousel</li>
<li>Newsletter Form</li>
<li>Four columns</li>
<li class="divider"></li>
<li class="dropdown-header">Tops</li>
<li>Good Typography</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Dresses</li>
<li>Unique Features</li>
<li>Image Responsive</li>
<li>Auto Carousel</li>
<li>Newsletter Form</li>
<li>Four columns</li>
<li class="divider"></li>
<li class="dropdown-header">Tops</li>
<li>Good Typography</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Jackets</li>
<li>Easy to customize</li>
<li>Glyphicons</li>
<li>Pull Right Elements</li>
<li class="divider"></li>
<li class="dropdown-header">Pants</li>
<li>Coloured Headers</li>
<li>Primary Buttons & Default</li>
<li>Calls to action</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Accessories</li>
<li>Default Navbar</li>
<li>Lovely Fonts</li>
<li>Responsive Dropdown </li>
<li class="divider"></li>
<li class="dropdown-header">Newsletter</li>
<form class="form" role="form">
<div class="form-group"><label class="sr-only" for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-primary btn-block">Sign in</button>
</form>
</ul>
</li>
</ul>
</li>
<li> <span class="glyphicon glyphicon-user"></span> About </li>
<li> <span class="glyphicon glyphicon-wrench"></span> Services </li>
<li> <span class="glyphicon glyphicon-ok"></span> Solutions </li>
<li> <span class="glyphicon glyphicon-briefcase"></span> Products </li>
<li> <span class="glyphicon glyphicon-list"></span> Skills </li>
<!-- <li> <span class="glyphicon glyphicon-cog"></span> Industries </li>-->
<li> <span class="glyphicon glyphicon-picture"></span> Portfolio </li>
<li> <span class="glyphicon glyphicon-pencil"></span> Blog </li>
<li> <span class="glyphicon glyphicon-comment"></span> Contacts </li>
</ul>
</div>
</div>
</nav>
now i want full width mega menu on hover each element. like home, about, services etc

Answer 1

You are doing wrong here data-toggle="tab"
<li><a data-toggle="tab" href="#" class="btn"> <span class="glyphicon glyphicon-home"></span> </a>
Should be data-toggle="dropdown"
<li><a data-toggle="dropdown" href="#" class="btn"> <span class="glyphicon glyphicon-home"></span> </a>
Fiddle
Also Here is a mega menu I created for another answer, gives you complete idea what to do and what not to do.