Change CSS drop down menu in a drop up menu - css

Question

I'm almost certain this question has been answered in one form or another. Applying the changes I've found here and elsewhere doesn't seem to get me any further.
I'm trying to change the css menu from crisislab.nl from a drop-down menu to a drop-up menu. (As you can see on the site I'm currently working on it.)
Current problem I'm encountering is the fact that menu seems to be working fine, expect for the fact that the menu text is displayed downwards and while the menu is moving up (If this doesn't sound logical, please look at crisislab.nl)
See the code below for my current progress. Anyone willing to assist?
Many thanks in advance!
#navigation {
width: 980px;
height: 38px;
}
#navigation li {
float: left;
position: relative;
top: 220px;
} #navigation li:hover { background: transparent url(gfx/navigation_hover.png) repeat; }
#navigation li a {
text-transform: uppercase;
color: white;
padding: 13px 33px;
line-height: 38px;
font-size: 11px;
}
#navigation li a:hover { text-decoration: none;}
#navigation li ul {
position: absolute;
background: transparent url(gfx/navigation_hover.png) left top repeat;
z-index: 1000;
min-width: 100%;
display:none;
left:-1px;
}
#navigation li:hover ul {
display:block;
}
#navigation li ul li {
background: none;
width: 100%;
}
#navigation li ul li:hover {
background: none;
background-color: #2a51b5;
}
#navigation li ul li a {
text-transform: uppercase;
color: white;
padding-left: 8px 10px;
line-height: 28px;
width: 100%;
display:block;
}

Answer 1

The basic difference from a dropdown to a dropup is the offset of the child ul:
Dropdowns have top:<x>px; and if you want a dropup you just say: bottom:<x>px;
I modified your code to make it work: http://jsfiddle.net/fJSVz/
Basically i changed the following rules:
#navigation li ul {
top: -9999px; /* <- removed */
display:none; /* <- this will trigger the hide/show */
}
#navigation li:hover ul {
bottom:20px; /* <- this is the trick to push the ul up */
display:block; /* <- show the ul on hover */
}