how to make full width mega menu in bootstrap

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><a href="#">Unique Features</a></li>
                                <li><a href="#">Image Responsive</a></li>
                                <li><a href="#">Auto Carousel</a></li>
                                <li><a href="#">Newsletter Form</a></li>
                                <li><a href="#">Four columns</a></li>
                                <li class="divider"></li>
                                <li class="dropdown-header">Tops</li>
                                <li><a href="#">Good Typography</a></li>
                            </ul>
                        </li>
                        <li class="col-sm-3">
                            <ul>
                                <li class="dropdown-header">Dresses</li>
                                <li><a href="#">Unique Features</a></li>
                                <li><a href="#">Image Responsive</a></li>
                                <li><a href="#">Auto Carousel</a></li>
                                <li><a href="#">Newsletter Form</a></li>
                                <li><a href="#">Four columns</a></li>
                                <li class="divider"></li>
                                <li class="dropdown-header">Tops</li>
                                <li><a href="#">Good Typography</a></li>
                            </ul>
                        </li>
                        <li class="col-sm-3">
                            <ul>
                                <li class="dropdown-header">Jackets</li>
                                <li><a href="#">Easy to customize</a></li>
                                <li><a href="#">Glyphicons</a></li>
                                <li><a href="#">Pull Right Elements</a></li>
                                <li class="divider"></li>
                                <li class="dropdown-header">Pants</li>
                                <li><a href="#">Coloured Headers</a></li>
                                <li><a href="#">Primary Buttons & Default</a></li>
                                <li><a href="#">Calls to action</a></li>
                            </ul>
                        </li>
                        <li class="col-sm-3">
                            <ul>
                                <li class="dropdown-header">Accessories</li>
                                <li><a href="#">Default Navbar</a></li>
                                <li><a href="#">Lovely Fonts</a></li>
                                <li><a href="#">Responsive Dropdown </a></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><a href="#" class="btn"> <span class="glyphicon glyphicon-user"></span> About </a></li>
                <li><a href="#" class="btn"> <span class="glyphicon glyphicon-wrench"></span> Services </a></li>
                <li><a href="#" class="btn"> <span class="glyphicon glyphicon-ok"></span> Solutions </a></li>
                <li><a href="#" class="btn"> <span class="glyphicon glyphicon-briefcase"></span> Products </a></li>
                <li><a href="#" class="btn"> <span class="glyphicon glyphicon-list"></span> Skills </a></li>
                <!-- <li>             <a href="#" class="btn">           <span class="glyphicon glyphicon-cog"></span> Industries         </a>           </li>-->
                <li><a href="#" class="btn"> <span class="glyphicon glyphicon-picture"></span> Portfolio </a></li>
                <li><a href="#" class="btn"> <span class="glyphicon glyphicon-pencil"></span> Blog </a></li>
                <li><a href="#" class="btn"> <span class="glyphicon glyphicon-comment"></span> Contacts </a></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.