<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >
<meta name= "viewport" content= "width=device-width,initial-scale=1" >
<!--<link rel= "stylesheet" href= "//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" >-
<link rel= "stylesheet" type= "Text/css" href= "Bootstrap.min.css" >
<!--<link rel= "stylesheet" type= "Text/css" href= "Foo.css" >-
<script src= "Foo.js" ></script>
<body>
<div class= "Container" >
<div class= "dropdown pull-right" >
<button class= "btn btn-default dropdown-toggle" type= "button" data-toggle= "dropdown" aria-expanded= "true" >
Subway path
<span class= "Caret" ></span>
</button>
<ul class= "Dropdown-menu dropdown-menu-right" role= "Menu" >
<li role= "Presentation" class= "Dropdown-header" >metro</li>
<li role= "Presentation" ><a role= "MenuItem" tabindex= "-1" href= "#" >num1</a></li>
<li role= "presentation" class= "disabled" ><a role= "MenuItem" tabindex= "-1" href= "#" >num2</a></ Li>
<li role= "Presentation" ><a role= "MenuItem" tabindex= "-1" href= "#" >num3</a></li>
<li role= "Presentation" class= "divider" ></li>
<li role= "Presentation" class= "Dropdown-header" >metro</li>
<li role= "Presentation" ><a role= "MenuItem" tabindex= "-1" href= "#" >num1</a></li>
<li role= "Presentation" ><a role= "MenuItem" tabindex= "-1" href= "#" >num2</a></li>
<li role= "Presentation" ><a role= "MenuItem" tabindex= "-1" href= "#" >num3</a></li>
</ul>
</div>
</div>
<script src= "Jquery-1.11.3.js" ></script>
<script src= "Bootstrap.min.js" ></script>
</body>
Bootstrap example-drop-down menu