title: menu is hidden inside div
body: <p>I am trying to show menu on <code>&lt;i class="fa fa-chevron-down"&gt;&lt;/i&gt;</code> click.
  I am using bootstrap 3.
  The problem is that menu is hidden inside <code>div</code>.
  I would like to show menu above the <code>div</code>.
  My code is here: <a href="http://jsfiddle.net/xrcwrn/o9txgsbz/" rel="nofollow">http://jsfiddle.net/xrcwrn/o9txgsbz/</a></p>
  
  <p><strong>Code</strong>:</p>
  
  <pre><code>&lt;div class="thumbnail"&gt;
      &lt;div class="media"&gt;
          &lt;a class="pull-left" href="#"&gt;
          &lt;img class="media-object" src="" alt="Image" /&gt;
          &lt;/a&gt;
          &lt;div class="pull-right" style="color: #c1c1c1"&gt;
              &lt;ul&gt;
                  &lt;li class="dropdown"&gt;
                      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;
                          &lt;i class="fa fa-chevron-down"&gt;&lt;/i&gt;
                      &lt;/a&gt;
                      &lt;ul class="dropdown-menu" role="menu"&gt;
                          &lt;li&gt;&lt;a href="topstory"&gt;delete&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="findfriends"&gt;Find Friends&lt;/a&gt; &lt;/li&gt;
                          &lt;li&gt;&lt;a href="settings"&gt;Settings&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href="logout"&gt;Logout&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
          &lt;div class="media-body"&gt;
              &lt;div class="media-heading"&gt;
                  &lt;strong&gt;
                      &lt;a href=profile?id=23"&gt;ABCD EFgh&lt;/a&gt;
                  &lt;/strong&gt;
              &lt;/div&gt;
              &lt;div class="media-heading" style="font-size: 9px"&gt;12/13/14&lt;/div&gt;
          &lt;/div&gt;
          &lt;div&gt; 
              Hello sdf asdf asdf asdf asdf asdf asdf  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>