I have a Bootstrap dropdown menu. The last `li` item is a submenu. How do I get the submenu to dropup while the full menu drops down? Here's the code: ``` FILTER Text Label name Label name Text Text Text Text Centralities AA <input type="radio" name="options" id="optio…

It sounds like the answer below would be how to do it from scratch, I was unaware there was a dropup class in Bootstrap... So the short Bootstrap answer is to apply the class "dropup" to the ` ` in earlier versions of bootstrap: ``` ``` However in newer versions of bootstrap (v3) the "dropup" class needs to be applied to the ` `'s container instead of the the ` ` itself: ``` ``` See http://jsfiddle.net/ZgyZP/5/ Original working answer that doesn't use bootstrap: You could use javascript to calculate the height of the submenu and then negatively offset the submenu's position. something like (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/

How to get a Bootstrap dropdown submenu to 'dropup'

css, drop-down-menu, html, twitter-bootstrap

Solution

It sounds like the answer below would be how to do it from scratch, I was unaware there was a dropup class in Bootstrap...

So the short Bootstrap answer is to apply the class "dropup" to the `<ul>` in earlier versions of bootstrap:

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

However in newer versions of bootstrap (v3) the "dropup" class needs to be applied to the `<ul>`'s container instead of the 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 that doesn't use bootstrap:

You could use javascript to calculate the height of the submenu and then negatively offset the submenu's position.

something like (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/

Problem

I have a Bootstrap dropdown menu. The last `li` item is a submenu. How do I get the submenu to dropup while the full menu drops down? Here's the 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> ```

Original source