How to get a Bootstrap dropdown submenu to 'dropup'

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>

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.

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/

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.

<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.

I used the dropup Class, and it worked perfectly as i expected it.

<div class="col-md-6 dropup">
				<span uib-dropdown auto-close="outsideClick">
					<p class="input-group">
						<input type="text" class="form-control" ng-model="int.schTimeFormatted" ng-disabled="true" name="schTime" />
						<span class="input-group-btn">
							<button type="button" class="btn btn-default cal" uib-dropdown-toggle>
								<i class="glyphicon glyphicon-time"></i>
							</button>
						</span>
					</p>
					<ul class="dropdown-menu" uib-dropdown-menu aria-labelledby="simple-dropdown">
						<li class="timerDropdown">
							<div class="row">
								<div class="col-md-6">
									<div uib-timepicker ng-model="int.schTime" ng-change="changed()" hour-step="hstep" minute-step="mstep" readonly-input="true" min="min"
										max="max" show-meridian="ismeridian"></div>
								</div>
								
								<div>
									Booked Timeslots
									<ul id="timeListB">
										<li ng-repeat="time in bookedTimeslots">{{time | date:"h:mma"}}</li>
									</ul>
								</div>
							</div>
							<hr>
							<button class="pull-right">close</button>
						</li>
					</ul>
				</span>
			</div>