CSS引導下拉定位

Question

我在定位引導下拉元素時遇到問題。我有一個列表項目中的下拉錨和菜單，旁邊一個縮略圖和一些文字（也錨內）：

<div class="panel-list"> 
    <ul> 

     <li class="panel-list-item"> 

      <div class="pull-right panel-list-option"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
        <i class="fa fa-ellipsis-v" ></i> 
       </a> 

       <ul class="dropdown-menu"> 
        <li><a href="/user/profile">Profile</a></li> 
        <li class="dropdown-header">3</li> 
        <li class="divider"></li> 
        <li><a href="/user/logout">Logout</a></li> 
       </ul> 
      </div> 

      <a href="#m"> 

       <div class="pull-left"> 
        <img class="panel-list-option-img" 
         src="http://blogs-images.forbes.com/tomiogeron/files/2012/10/Stripe-logo.jpeg" 
         height="30" width="30"> 

       </div> 

       <div class="col-xs-10"> 
        <h1>Stripe</h1> 
        <p class="description">Payment Processing for Developers</p> 
       </div> 
      </a> 

     </li> 
    </ul> 
</div> 

然而，下拉出現在div下方的位置，在這樣的畫面：

CSS：

.panel-list ul{ 
    margin:0; 
    padding:0; 
} 
.panel-list-item>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; 
} 

什麼是做到這一點的最好方法是什麼？

Answer 1

你錯過了周圍的觸發+菜單.dropdown類 - 它應該改爲：

<div class="dropdown"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"> 
    <!-- Menu HTML .. --> 
</div> 

需要這個類相對於其觸發（<a>)下拉菜單的位置從docs。

裹下拉的觸發和.dropdown內的下拉菜單，或聲明位置的另一個因素：相對;.然後添加菜單的HTML