<!DOCTYPE HTML>
<html>
<head>
<link href="http://java2s.com/style/bootstrap.min.css" rel="stylesheet">
<!--from w w w .j av a2 s. com-->
<script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
<script src="http://java2s.com/style/bootstrap.min.js"></script>
</head>
<body style='margin: 20px;'>
<div id="navbar-example" class="navbar navbar-static">
<div class="container" style="width: auto;">
<a class="navbar-brand" href="#">Project Name</a>
<button class="navbar-toggle" type="button" data-toggle="collapse"
data-target=".bs-js-navbar-collapse">
<span class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<div class="nav-collapse collapse bs-js-navbar-collapse">
<ul class="nav navbar-nav" role="navigation">
<li class="dropdown"><a id="drop1" href="#" role="button"
class="dropdown-toggle" data-toggle="dropdown">Dropdown <b
class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<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 href="#" id="drop2" role="button"
class="dropdown-toggle" data-toggle="dropdown">Dropdown 2 <b
class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<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>
</ul>
<ul class="nav navbar-nav pull-right">
<li id="fat-menu" class="dropdown"><a href="#" id="drop3"
role="button" class="dropdown-toggle" data-toggle="dropdown">Dropdown
3 <b class="caret"></b>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
<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>
</ul>
</div>
<!-- /.nav-collapse -->
</div>
<!-- /.container -->
</div>
</body>
</html>