title: Dropdown on Bootstrap not expanding
body: <p>Wanted a horizontal menu for my application. Used Bootstrap to create it using the 
  this <a href="http://www.bootply.com/113314" rel="nofollow noreferrer">http://www.bootply.com/113314</a> example. it is not working though. Also need help to understand how the button identifies the appropriate list without specifying id or name anywhere given the fact that there are more than one in the document</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
      &lt;title&gt;Home&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
          crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div align="center"&gt;
          &lt;a href="home.erp"&gt;
              &lt;img title="Home" class="img-rounded" src="images/empireSmall.png"&gt;
          &lt;/a&gt;
      &lt;/div&gt;
      &lt;div align="right"&gt;
          &lt;button class="btn btn-danger" onclick="logout()"&gt;Logout&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="btn-group"&gt;
  
          &lt;div class="btn-group"&gt;
              &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt;
               Administration
              &lt;span class="caret"&gt;&lt;/span&gt;
              &lt;/button&gt;
  
              &lt;ul class="dropdown-menu" role="menu"&gt;
  
                  &lt;li&gt;&lt;a href="karateInvoiceApplication.erp"&gt; Invoice Application&lt;/a&gt;&lt;/li&gt;
  
                  &lt;li&gt;&lt;a href="karateStudentApplication.erp"&gt; Karate Student&lt;/a&gt;&lt;/li&gt;
  
              &lt;/ul&gt;
          &lt;/div&gt;
  
          &lt;div class="btn-group"&gt;
              &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt;
               System
              &lt;span class="caret"&gt;&lt;/span&gt;
              &lt;/button&gt;
  
              &lt;ul class="dropdown-menu" role="menu"&gt;
  
                  &lt;li&gt;&lt;a href="userApplication.erp"&gt; User Application&lt;/a&gt;&lt;/li&gt;
  
              &lt;/ul&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>