Getting menu stick to the bottom of header - html

Question

I'm trying to let my menu stick to the bottom of my header. I've already tried getting it down, with deleting the float's, adding some, playing with padding/margin (this isn't an option seems to me?
<div id="header">
<div id="logo">
<h1>blah</h1>
<h3>Blah</h3>
</div>
<div id="menu">
<ul>
<li>qsdfqsdfqsdf</li>
<li>qsdfqdsfqsdf!</li>
<li>qdsf</li>
<li>qdsf</li>
</ul>
</div>
</div>
CSS:
/** HEADER */
#header {
height: 125px!important;
background: #000;
position: fixed;
top: 0;
width: 100%;
}
/* Logo */
#logo
{
float: left;
width: 250px;
padding: 20px 0px 0px 50px;
text-transform: uppercase;
}
#logo h3{
color: #fff;
margin-left: 1em;
font-size: 1em;
}
#logo h1
{
padding: 5px 10px 0px 0px;
}
#logo h1 span, #logo h3 span{
color: #000;
}
#logo h1 a
{
text-decoration: none;
font-size: 1.5em;
font-weight: 300;
color: #FFFFFF;
}
#logo p
{
display: block;
margin-top: -10px;
padding: 0px 0px 0px 0px;
letter-spacing: 1px;
font-size: 1.2em;
color: #FFFFFF;
}
#logo p a
{
color: #FFFFFF;
}
/* Menu */
#menu{
float: right;
width: 600px;
margin: 2em 2em 0 0;
}
#menu ul{
float: right;
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
position: relative;
display: inline-table;
}
#menu li
{
float: left;
}
#menu a
{
display: block;
letter-spacing: 1px;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
font-weight: 300;
color: #FFFFFF;
padding: 1em;
text-decoration: none;
}
#menu a:hover{
color: #000;
text-decoration: none;
background: #fff;
}
#menu ul li {
float: left;
}
#menu ul li:hover {
}
Here an example:
http://jsfiddle.net/2wmSt/

Answer 1

Almost there mate, just position the menu absolute to the bottom of the header.
#menu{
position:absolute;
bottom:0;
right:0;
}
jsfiddle example