<link rel="stylesheet" href="https://bootstraptema.ru/plugins/2015/bootstrap3/bootstrap.min.css" />
<script src="https://bootstraptema.ru/assets/js/jquery-1.10.2.js"></script>
<script src="https://bootstraptema.ru/plugins/2015/bootstrap3/bootstrap.min.js"></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>
