Nested DIVs and alignment issues - html

Question

I'm experiencing 4 issues with my current code that I cannot fix (every time I fix something it creates a collateral issue):
http://jsfiddle.net/88zNs/1/
The logo text is slightly (1 or 2px) lower than the menu items
The blue and the red DIVs should both have a fixed height of 80px and be
vertically centered in the #header DIV which has a height of 120px.
But for some reason the blue and red DIVs have both a height of 120px and we can't
see the black #header DIV behind.
My menu items are aligned to the left side of the red DIV but I'd like them to be aligned
to the right side (can't use float right if I want to keep the same
link order (Link 1, Link 2, Link 3)
The sub-menu items (sub-link1, sub-link2, etc) are floating next to each other whereas I'd like them under each other like on a normal drop down menu
I know it's a lot of question... Many thanks for you help
EDIT: thanks to salsaturion everything's almost fixed http://jsfiddle.net/88zNs/9/ Remaining issue is that the items order are now in the wrong order due to float: right
HTML:
<div id="header">
<div class="logo">Logo</div>
<ul class="drop_menu">
<li><a href='#'>Link 1</a>
<ul>
<li><a href='#'>Sub Link 1</a>
</li>
<li><a href='#'>Sub Link 2</a>
</li>
</ul>
</li>
<li><a href='#'>Link 2</a>
<ul>
<li><a href='#'>Sub Link 1</a>
</li>
<li><a href='#'>Sub Link 2</a>
</li>
<li><a href='#'>Sub Link 3</a>
</li>
<li><a href='#'>Sub Link 4</a>
</li>
</ul>
</li>
<li><a href='#'>Link 3</a>
<ul>
<li><a href='#'>Sub Link 1</a>
</li>
<li><a href='#'>Sub Link 2</a>
</li>
<li><a href='#'>Sub Link 3</a>
</li>
<li><a href='#'>Sub Link 4</a>
</li>
</ul>
</li>
</ul>
</div>
CSS:
#header {
width: 100%;
height: 120px;
background: #fff;
color: #124191;
font-weight: 300;
font-size: 28px;
display: table;
background: #000;
position: fixed;
}
.logo {
background: aqua;
display: table-cell;
vertical-align: middle;
left:0;
height:80px;
}
/* ==========================================================================
Site Navigation
========================================================================== */
/* CSSTerm.com Simple Horizontal DropDown CSS menu */
.drop_menu {
background:red;
padding:0;
margin:0;
list-style-type:none;
height:80px;
right: 0;
display: table;
z-index: 3000;
display: table-cell;
vertical-align: middle;
right: 0;
}
.red {
background:red;
}
.green {
background:green;
height: 60px;
-webkit-transition-duration: 400ms;
-webkit-transition-function: linear;
}
.drop_menu li {
display: table-cell;
vertical-align: middle;
}
.drop_menu li a {
padding:9px 20px;
display:block;
color:#666;
text-decoration:none;
font-size: 15px;
font-weight: 400;
text-transform: uppercase;
}
/* Submenu */
.drop_menu ul {
position:absolute;
left:-9999px;
top:-9999px;
list-style-type:none;
}
.drop_menu li:hover {
position:relative;
background:#5FD367;
}
.drop_menu li:hover ul {
left:0px;
top:30px;
background:#5FD367;
padding:0px;
}
.drop_menu li:hover ul li a {
padding:5px;
display:block;
width:168px;
text-indent:15px;
background-color:#5FD367;
}
.drop_menu li:hover ul li a:hover {
background:#005555;
}
.block {
width:100%;
height: 500px;
}

Answer 1

Quickly looked at issue 2 and the reason is because of the table-cell. The following should have the same effect and leave the div as 80px in height:
.logo {
background: aqua;
vertical-align: middle;
line-height: 80px; /* this is set to same height as the div */
left:0;
height:80px;
margin: 20px 0;
}
Will have a look at the other questions when I get a chance
EDIT:
1) Don't see the issue - they all look like they are aligned
2) As per above
3 and 4) Adding float: right to .drop_menu li should fix both issues