I need to make a div as a dropdown and when clicking on it, 
the menu slides and shows its items.

I've tried to implement this but when clicking on the div it doesn't show 
it's items at all.

I've used this reference:
<http://getbootstrap.com/javascript/#dropdowns-examples>

Here's the way I've implemented this:

```js
$(document).ready(function() {
  $('.dropdown-toggle').dropdown();
});
```

```css
.top-bar-margin-top {
  margin-top: 43px;
  /*padding: 0;*/
}
.top-bar-margin-top a:hover {
  text-decoration: none;
}
```

```html
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="col-md-2 col-lg-2 top-bar-margin-top">
  <div class="dropdown">
    <a id="dLabel" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
      <span class="top-bar-small-title make-it-regular">item</span>
      <br />
      <span class="top-bar-app-links make-it-regular">Select Item</span>
      <span class="caret"></span>
    </a>
  </div>

  <ul class="dropdown-menu" aria-labelledby="dLabel">
    <li><a href="#">Item 1</a>
    </li>
    <li><a href="#">Item 2</a>
    </li>
  </ul>
</div>
```

How can it be solved ?