Multi Layered Drop-up Menu Twitter Bootstrap - css

Question

My code below. This comes out to be a horizontal menu bar. I want to put this in the footer; therefore, has to pop out.
HTML
<ul id="nav">
<li>
Chicago Bears
<ul>
<li>Running Backs</li>
<li>Quarterbacks</li>
<li>Lineman</li>
</ul>
</li>
</ul>
CSS
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

Answered another question (that was deleted) about the same premise, a menu that pops "up" instead of down, here are my results for future users:
Created my own .dropup-menu class to not mess with the default functionality of the dropdown menu. In this class, i positioned the dropdown menu above the current menu item along with the arrow so now once the menu with a dropdown available is clicked, the menu opens upwards.
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;
}
Markup
In order to use the class we have to include it inside the container of the dropdown menu, like so:
<ul class="dropdown-menu dropup-menu">
<li>...</li>
</ul>
Demo: http://jsfiddle.net/andresilich/NMs4Z/2/

Answer 2

I guess the OP simply ask for a way to place the dropdown selection above the menu bar. As of 2.3.1, the actual version of Bootstrap, it's already integrated and explayned in the examples!
You simply need to add the class dropup to the parent of your dropdown element
<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 Menus the last part of the Button Dropdown section.