title: CSS Bootstrap dropdown positioning
body: <p>I am having trouble positioning a bootstrap dropdown element. I have the dropdown anchor and menu within a list item, alongside a thumbnail and some text (also within an anchor):</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="panel-list"&gt;
      &lt;ul&gt;
  
          &lt;li class="panel-list-item"&gt;
  
              &lt;div class="pull-right panel-list-option"&gt;
                  &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt; 
                      &lt;i class="fa fa-ellipsis-v" &gt;&lt;/i&gt;
                  &lt;/a&gt;
  
                  &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a href="/user/profile"&gt;Profile&lt;/a&gt;&lt;/li&gt;
                      &lt;li class="dropdown-header"&gt;3&lt;/li&gt;
                      &lt;li class="divider"&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="/user/logout"&gt;Logout&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  
              &lt;a href="#m"&gt;
  
                  &lt;div class="pull-left"&gt;
                      &lt;img class="panel-list-option-img"
                           src="http://blogs-images.forbes.com/tomiogeron/files/2012/10/Stripe-logo.jpeg"
                           height="30" width="30"&gt;
  
                  &lt;/div&gt;
  
                  &lt;div class="col-xs-10"&gt;
                      &lt;h1&gt;Stripe&lt;/h1&gt;
                      &lt;p class="description"&gt;Payment Processing for Developers&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/a&gt;
  
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>However, the dropdown appears in a  location below the div as in this picture:</p>
  
  <p><img src="https://i.imgur.com/GwVlrxK.png" alt="screenshot"></p>
  
  <p>CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>.panel-list ul{
      margin:0;
      padding:0;
  }
  .panel-list-item&gt;a{
      overflow:hidden;
      padding:10px 10px 0 10px;
      background-color:#fff;
      display:block;
      color:#888;
  }
  
  
  .panel-list-option a {
      position:relative;
      display:block;
      padding:10px;
  }
  
  .panel-list-option ul{
      display:absolute;
      z-index:1;
      float:right;
  }
  </code></pre>
  
  <p>What is the best way to do this?</p>