title: Why sidebar dropdown menu is not working bootstrap 3
body: <p>I'm just trying to create a simple left sidebar navigation menu. But the dropdown is not working, though I have add the js. I'm using minified version of bootstrap 3.</p>
  
  <p>Here's my html  code</p>
  
  <pre><code>&lt;div class="container"&gt;
          &lt;!-- Sidebar Navigation --&gt;
          &lt;nav class="left-navbar navbar hidden-xs" role="navigation"&gt;
              &lt;div id="profile"&gt;
                  &lt;div class="pic"&gt;&lt;/div&gt;
                  &lt;div class="name"&gt;
                      &lt;h2&gt;Personal Site&lt;/h2&gt;
                  &lt;/div&gt;
                  &lt;div class="tag"&gt;
                      &lt;h3&gt;A simple blogging site&lt;/h3&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="nav-menu"&gt;
                  &lt;ul class="nav-menu nav-pills nav-stacked"&gt;
                      &lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Blog&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="dropdown"&gt;
                          &lt;a class="dropdown-toggle" data-toogle="dropdown" href="#"&gt;
                              Projects
                              &lt;span class="caret"&gt;&lt;/span&gt;
                          &lt;/a&gt;
                          &lt;ul class="dropdown-menu"&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Project Blog&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/nav&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>And here is the custom CSS I'm using for sidebar</p>
  
  <pre><code>    .left-navbar {
      width: 260px;
      height: 100%;
      position: absolute;
      position: fixed;
      top: 0;
      left: 0;
      background: #333333;
      overflow-x: none;
      overflow-y: auto;
      color: white;
      -webkit-box-shadow: inset 0 0 5px 5px #222222;
      -moz-box-shadow: inset 0 0 5px 5px #222222;
      box-shadow: inset 0 0 5px 5px #222222;
      border-radius: 0;
  }
  #profile {
      padding: 25px 10px 10px 10px;
      text-align: center;
      position: relative;
  }
  #profile .pic {
      background-image: url('../img/profile.jpg');
      width: 150px;
      height: 150px;
      margin: 0 auto;
      border-radius: 50%;
  }
  #profile .name h2 {
      font-family: "Alegreya Sans", sans-serif;
      font-size: 40px;
      color: white;
      margin: 5px;
  }
  #profile .tag h3 {
      font-family: "Buenard", serif;
      font-size: 15px;
      color: white;
      margin: 0;
  }
  .nav-menu {
      text-align: center;
      padding: 15px 0 25px 0;
      margin: 0;
  }
  .nav-menu ul li a {
      list-style: none;
      text-align: center;
      background: transparent;
      text-decoration: none;
      color: white;
      font-size: 15px;
  }
  </code></pre>
  
  <p>Can you help me?</p>