Горизонтальное выпадающее меню Bootstrap

Готовый сниппет белого горизонтального выпадающего HTML меню для Bootstrap 3 с использованием базовых селекторов.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.10.2.js" integrity="sha256-it5nQKHTz+34HijZJQkpNBIHsjpV8b6QzMJs9tmOBSo=" crossorigin="anonymous"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style>
 .dropdown-menu {
 width: 100%;
 position: fixed;
 top: 50px;
 left: 0;
 z-index: 1000;
 display: none;
 float: left;
 min-width: 160px;
 padding: 5px 0;
 margin: 0 auto;
 text-align: left;
 }
 
 .dropdown-menu li {
 display: inline-block;
 }
 
 .dropdown-menu li.dropdown .dropdown-menu {
 top: 210px;
 }
 
 .dropdown-menu li.dropdown {
 background: #ccc;
 }
</style>
<div class="navbar navbar-default navbar-fixed-top">
 <div class="container-fluid">
 <div class="navbar-header">
 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
 <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 </button>
 <a class="navbar-brand" href="#">Brand</a>
 </div>
 <div class="collapse navbar-collapse">
 <ul class="nav navbar-nav">
 <li class="dropdown">
 <!-- having the href link here doesn't seem to do anything -->
 <a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/">Home <span class="caret"></span></a>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
 <li role="presentation" class="divider"></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
 </ul>
 </li>
 <li class="dropdown">
 <a id="dLabel2" role="button" data-toggle="dropdown" href="#">About <span class="caret"></span></a>
 <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel2">
 <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">menu item 1</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">menu item 2</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">menu item 3</a></li>
 <li role="presentation"><a role="menuitem" tabindex="-1" href="http://twitter.com/fat">Separated link</a></li>
 </ul>
 </li>
 <li><a href="#contact">Contact</a></li>
 </ul>
 </div>
 <!--/.nav-collapse -->
 </div>
</div>