マルチレイヤードドロップダウンメニューTwitter Bootstrap

Question

以下のマイコード。これは水平のメニューバーになります。私はこれをフッタに入れたい。したがって、飛び出さなければならない。

HTML

<ul id="nav"> 
    <li> 
     <a href="#">Chicago Bears</a> 
     <ul> 
      <li><a href="">Running Backs</a></li> 
      <li><a href="">Quarterbacks</a></li> 
      <li><a href="">Lineman</a></li> 
     </ul> 
    </li> 
</ul> 

CSS同じ前提に関する別の問題（つまり、削除された）、代わりにダウンで、ここにいる "UP" ポップメニューを回答

ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    width: 150px; 
} 

ul li { 
    position: top; 
} 

li ul { 
    position: absolute; 
    left: 149px; 
    top: 0; 
    display: none; 
} 

ul li a { 
    display: block; 
    text-decoration: none; 
    color: #777; 
    background: #fff; 
    padding: 5px; 
    border: 1px solid #ccc; 
    border-bottom: 0; 
} 

ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    width: 150px; 
    border-bottom: 1px solid #ccc; 
} 

li:hover ul { 
    display: block; 
} 

Answer 1

将来のユーザーのための私の結果：

作成した自分自身.dropup-menuクラスドロップダウンメニューのデフォルト機能を混乱させないようにします。このクラスでは、現在のメニュー項目の上にドロップダウンメニューを矢印とともに配置したので、使用可能なドロップダウンメニューがクリックされると、メニューが上に開きます。

<ul class="dropdown-menu dropup-menu"> 
    <li>...</li> 
</ul> 

：、ドロップダウンメニューのコンテナ内にそれを含めるようにようにするために我々が持っているクラスを使用するためには

CSS

.dropup-menu { 
    bottom: 100%; 
    top: auto !important; 
} 

/* position the arrow downwards, pointing to the menu */ 

.navbar .dropup-menu:before { 
    border-bottom: none; 
    border-left: 7px solid transparent; 
    border-right: 7px solid transparent; 
    border-top: 7px solid rgba(0, 0, 0, 0.2); 
    left: 7px; 
    top: 100%; 
} 

.navbar .dropup-menu:after { 
    border-bottom: none; 
    border-left: 6px solid transparent; 
    border-right: 6px solid transparent; 
    border-top: 6px solid #fff; 
    left: 10px; 
    top: 100%; 
    left: 6px; 
} 

/* point the caret up*/ 

.up { 
    border-left: 4px solid transparent; 
    border-right: 4px solid transparent; 
    border-bottom: 4px solid #000000; 
    border-top: none; 
} 

マークアップ

デモ：http://jsfiddle.net/andresilich/NMs4Z/2/

Answer 2

私はOPは単にドロップダウンメニューバーの上に選択を配置する方法を求めると思います。
2.3.1では、Bootstrapの実際のバージョンです。すでに例で統合され、エキスパンドされています！

あなたは、単にあなたのドロップダウン要素

<div class="btn-group dropup"> 
    <button class="btn">Dropup</button> 
    <button class="btn dropdown-toggle" data-toggle="dropdown"> 
    <span class="caret"></span> 
    </button> 
    <ul class="dropdown-menu"> 
    <!-- dropdown menu links --> 
    </ul> 
</div> 

Check the docs here、Dropupメニューボタンドロップダウンセクションの最後の部分の親にクラスdropupを追加する必要があります。