html - How to get a Bootstrap dropdown submenu to 'dropup' -

i have bootstrap dropdown menu. last 'li' item submenu. how submenu dropup while full menu drops down? here's code:

                        <div class="dropdown">                             <a class="inputbara dropdown-toggle" data-toggle="dropdown" href="#">filter</a>                             <ul class="dropdown-menu" role="menu" aria-labelledby="dlabel">                                 <li role="presentation">                                     <a role="menuitem" href="#">text</a>                                 </li>                                 <li role="presentation">                                     <label>label name</label>                                     <label>label name</label>                                     <label class="checkbox">                                         <input type="checkbox">                                         text </label>                                     <label class="checkbox">                                         <input type="checkbox">                                         text </label>                                     <label class="checkbox">                                         <input type="checkbox">                                         text </label>                                     <label class="checkbox">                                         <input type="checkbox">                                         text </label>                                 </li>                                 <li class="dropdown-submenu">                                     <a tabindex="-1" href="#">centralities</a>                                     <ul class="dropdown-menu">                                         <label class="radio">                                             <input type="radio" name="options" id="optionsradios1" value="a" checked>                                             aa </label>                                         <label class="radio">                                             <input type="radio" name="options" id="optionsradios2" value="b">                                             bb </label><label class="radio">                                             <input type="radio" name="options" id="optionsradios2" value="c">                                             cc </label><label class="radio">                                             <input type="radio" name="options" id="optionsradios2" value="d">                                             dd </label><label class="radio">                                             <input type="radio" name="options" id="optionsradios2" value="e">                                             ee </label>                                     </ul>                                 </li>                             </ul>                         </div> 

it sounds answer below how scratch, unaware there dropup class in bootstrap...

so short bootstrap answer apply class "dropup" <ul> in earlier versions of bootstrap:

 <ul class="dropdown-menu dropup" role="menu" aria-labelledby="dlabel"> 

however in newer versions of bootstrap (v3) "dropup" class needs applied <ul>'s container instead of the <ul> itself:

<div class="dropup">     <ul class="dropdown-menu" role="menu" aria-labelledby="dlabel"> </div> 

see http://jsfiddle.net/zgyzp/5/

original working answer doesn't use bootstrap:

you use javascript calculate height of submenu , negatively offset submenu's position.

something (with jquery):

$('.dropdown-submenu').hover(     function(){     //hover in          $('.dropdown-submenu > ul').css('top', '-' + $('.dropdown-submenu > ul').css('height'));      },     //hover out     function(){     } ); 

fiddle: http://jsfiddle.net/zgyzp/4/