How to get a Bootstrap dropdown submenu to 'dropup'

Question

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>

Solution 1

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/

Solution 2

The best solution:

<div class="dropup">
   <ul class="dropdown-menu"></ul>
</div>

It's a native class in bootstrap. The bootstrap (using 3.1.1) css file has a .dropup .dropdown-menu selector so that's how I found out.

Solution 3

Use a class, like up <ul class="dropdown up">

Write style of up .up { bottom:100% !important; top:auto !important; }

Note: Increase bottom as per your button size.

Solution 4

<div class="dropup">
   <ul class="dropdown-menu"></ul>
</div> 

The above code is correct, but doesn't work unless a parent element has the position property set.

Examples that works are class="col-lg-12" or just

<div style="position: relative;">

I use Bootstrap v3.0.0.

View more solutions

Comments

[Ingvi Gautsson]

This worked for me. "dropup" class didn't work, made my menus invisible. Maybe because I have my menus nested in some strange way.

[Ismael]

greeeeeeeat solution!

[jävi]

Nice! It's also compatible with Bootstrap 2.

[leftclickben]

This is incorrect, the dropup class goes on the container, i.e. the parent of the <ul>, not the <ul> itself. Bootstrap 3.3.2.

[DrCord]

Thanks for the heads-up, I have updated my answer to include bootstrap 3 :D

[DrCord]

@leftclickben - did you down vote me for this? kinda ridiculous as my answer was made long before bootstrap version 3 came out...

[leftclickben]

Yeah I guess I was more downvoting the fact that this was marked the correct answer when it isn't (any more), sorry about that. It's an upvote now, and your answer is better than the other one because it includes both versions of bootstrap. Thanks for updating :-)

[DrCord]

@leftclickben - thanks for reminding me to update :D

[Elon Zito]

a beautiful, gorgeous answer. Wish I could give it plus two. thank you very much! this dropup class has been nagging at me for months.

[pekaaw]

Fixed as of v3.3.1. github.com/twbs/bootstrap/commit/…

[TheCuBeMan]

Important note: In case of a button group, where we wish to set the menu to be opened upwards from the designated button, the "dropup" class should be added to the element marked with the "btn-group" class. FYI

[ledlogic]

Does someone have a solution that will drop up like an OS menu - if there is adequate room, dropdown, but if the edge is close to the outer view boundary, dropup?

[DrCord]

@ledlogic - that is called collision detection. I don't think it is built in to bootstrap but hopefully knowing what it is called will help you to find a solution.

[pjdavis]

.dropup did not work with what I had, but this worked perfectly

[Manjesh V]

@paulos its dropdown up