Sub Navigation Bar on hover below main navigation - html

Question

I want to create a sub navigation bar using bootstrap that look as in the image below. For example, the 'Advertising' tab on the main nav bar can have two sub pages named 'How It Works' and 'Our Partners'. I want the 'How It Works' and 'Our Partners' links to be shown in a subnav bar below the main nav bar when the mouse is hovered on the 'Advertising' tab. How can I do this? Tried so many examples online, but still couldn't get it working

Answer 1

Try this:
I used bootstrap V3.3.6
Example : https://jsfiddle.net/pfss9b28/
HTML:
<div id="navbar">
<nav class="navbar navbar-default navbar-static-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav">
<li>About</li>
<li class="dropdown">
Advertising <b class="caret"></b>
<ul class="dropdown-menu">
<li>How It Works</li>
<li>Our Partners</li>
</ul>
</li>
<li>Press</li>
<li>Contact</li>
<li class="dropdown">
Test other child <b class="caret"></b>
<ul class="dropdown-menu">
<li>child 1</li>
<li>child 2</li>
<li>child 3</li>
<li>child 4</li>
<li>child 5</li>
</ul>
</li>
</ul>
</div>
</nav>
</div>
CSS:
.navbar-default{
background:#333;
color:#fff;
}
.navbar-default .navbar-nav > li > a{
color:#fff !important;
}
.navbar-default .navbar-nav li a:hover{text-decoration:underline}
.navbar-default .navbar-nav > li.dropdown > a{position:relative;}
.navbar-default .navbar-nav > li.dropdown:hover > a:after{
background: #333;
content: " ";
display: block;
height: 15px;
left: 20px;
position: absolute;
top: 100%;
margin-top:-10px;
transform: rotate(45deg);
width: 15px;
z-index:10001;
}
.navbar-default .navbar-nav > .active > a,.navbar-default .navbar-nav > .active > a:hover,.navbar-default .navbar-nav > li > a:hover{background:#333;color:#fff;text-decoration:underline;}
.nav > li{
position:inherit;
}
.dropdown-menu{
left: 0;
min-width: 100% !important;
position: absolute !important;
right: 0;
background:#E1E0DE;
padding:13px 0px;
}
.dropdown-menu > li{
display:inline-block;
}
.dropdown-menu > li > a:hover, .dropdown-menu > .active > a:hover {
text-decoration: underline;
background:#E1E0DE;
}
ul.nav li:hover > ul.dropdown-menu {
display: block;
}