<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="navbar navbar-default navbar-static-top">
<div class="container">
<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="#">Bootstarp Mega Menu </a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li class="dropdown menu-large"">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"> Mega Menu1 <b class="caret"></b> </a>
<ul class="dropdown-menu megamenu row">
<li>
<div class="col-sm-6 col-md-3">
<img src="https://farm4.staticflickr.com/3894/15008518202_b016d7d289_m.jpg" width="340" height="120" class="thumbnail" alt="" />
</div>
<div class="col-sm-6 col-md-3">
<ul>
<li class="dropdown-header">
<b> we can write some content about image and <br><br><p> we can add link to continue to the page</li></p><p></li><a href="#">Read more...</a></b></li></p></li></ul>
</div>
<div class="col-sm-6 col-md-3">
<ul>
<li class="dropdown-header">
<p> Welcome! This is a example of mega menu</p>
<p>This item comes with a typographic stylings such</p><p>as headings, lists, etc.</p>
<p>This mega menu has been tested in</p><p> all major browsers.</p></li></ul>
</div>
<div class="col-sm-6 col-md-3">
<ul>
<li class="dropdown-header"><b>Subscription Newsletter</b><form>
<br>
Name:<br>
<input type="text" name="firstname" placeholder="Your name">
<br>
Email-Id:<br>
<input type="email" name="emailid" placeholder="Email-id">
<br><br>
<button type="button">Submit</button>
</form>
</li></ul>
</div>
</li>
</ul>
</li>
<li class="dropdown menu-large">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Mega Menu2 <b class="caret"></b></a>
<ul class="dropdown-menu megamenu row">
<li class="col-sm-3">
<ul>
<li class="dropdown-header">Programing Languages</li>
<li><a href="#">Html</a></li>
<li><a href="#">Css3</a></li>
<li><a href="#">Php</a></li>
<li class="divider"></li>
<li class="dropdown-header">Advanced Languages</li>
<li><a href="#">Ajax</a></li>
<li><a href="#">Javascript</a></li>
<li><a href="#">Json</a></li>
<li><a href="#">JQuery</a></li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">
This is a sample of Normal Text<br><br>
<i>This is a sample of an Italic text</i><br><br>
<b>This is a sample of a Bold text</b>
</li>
<li class="divider"></li>
<li class="dropdown-header"><b>Contact Us</b>
<br><br>
To get in touch with us please fill in the form,<br>or find contact information of our offices worldwide<br> from the list below
<br><br><button type="button">Contact Us</button>
</li>
</li>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header"><b>Video</b><br><br>You can add video or audio to get more<br>information about the content...<li><video width="320" height="240" controls>
<source src="https://youtu.be/OB_bOn37xXs" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</ul>
</li>
<li class="col-sm-3">
<ul>
<li class="dropdown-header">
Some Useful Links</li>
<li><a href="#">Networking</a></li>
<li><a href="#">Security</a></li>
<li><a href="#">Web Application</a></li>
<li><a href="#">Electronics</a></li>
<li><a href="#">Web Security</a></li>
<li><a href="#">Data Mining</a></li>
<li><a href="#">Web Mining</a></li>
<li><a href="#">Cryptography</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
.navbar-default{
color: #fff;
background-color: #FF7F50;
border-color: #269abc;
}
.navbar-default .navbar-nav > li > a{
color:#fff;
}
.navbar-default .navbar-nav > .dropdown > a .caret{
border-top-color: #fff;
border-bottom-color: #fff;
}
.navbar-default .navbar-brand{
color:#fff;
}
.menu-large {
position: static !important;
}
.megamenu{
padding: 20px 0px;
width:100%;
}
.megamenu> li > ul {
padding: 0;
margin: 0;
}
.megamenu> li > ul > li {
list-style: none;
}
.megamenu> li > ul > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: 1.428571429;
color: #333333;
white-space: normal;
}
.megamenu> li ul > li > a:hover,
.megamenu> li ul > li > a:focus {
text-decoration: none;
color: #262626;
background-color: #f5f5f5;
}
.megamenu.disabled > a,
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
color: #999999;
}
.megamenu.disabled > a:hover,
.megamenu.disabled > a:focus {
text-decoration: none;
background-color: transparent;
background-image: none;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
cursor: not-allowed;
}
.megamenu.dropdown-header {
color: #428bca;
font-size: 18px;
}
@media (max-width: 768px) {
.megamenu{
margin-left: 0 ;
margin-right: 0 ;
}
.megamenu> li {
margin-bottom: 30px;
}
.megamenu> li:last-child {
margin-bottom: 0;
}
.megamenu.dropdown-header {
padding: 3px 15px !important;
}
.navbar-nav .open .dropdown-menu .dropdown-header{
color:#fff;
}
}
