Give this a shot:
I implemented bootstrap V3.3.6
Here's an 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><a href="#">About</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Advertising <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">How It Works</a></li>
<li><a href="#">Our Partners</a></li>
</ul>
</li>
<li><a href="#">Press</a></li>
<li><a href="#">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Test other child <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">child 1</a></li>
<li><a href="#">child 2</a></li>
<li><a href="#">child 3</a></li>
<li><a href="#">child 4</a></li>
<li><a href="#">child 5</a></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;
}