Padding has unexpected effect on drop down menu with absolute postioning

[ecelim]

I have #header div with the following css properties:#header{ background-image:url('img/header-bkg-tile.png'); background-repeat:repeat-x;}and #header-container inside it with this properties:#header-container{ height:63px; width: 1120px; position: relative; left : 50%; margin-left: -560px; padding-top:19px;}The structure is this just in case:<div id="header"> <div id="header"> </div></div>Inside #header you have an image and a <ul>, and everything is working as expected.My problem is when creating this simple dropdow.The issue itself is that I cant reach the lower parts of the .sub_menu, the dropdown goes back to the "resting position" after you go under the penultimate element.You can see a live example here.I have isolated the problem and it has to do with the padding I am using to centre the image vertically: padding-top:19px;The relevant code of the dropdown is the following:/* LEVEL ONE*/ul.dropdown { position: relative; }ul.dropdown li { float: left; zoom: 1; }ul.dropdown a:hover { color: #000; }ul.dropdown a:active { color: #ffa500; }ul.dropdown li a { display: block; padding: 4px 8px;}ul.dropdown li:last-child a { border-right: none; } /* Doesn't work in IE */ul.dropdown li.hover,ul.dropdown li:hover { position: relative; }ul.dropdown li.hover a { color: black; }/* LEVEL TWO*/ul.dropdown ul { width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0;}ul.dropdown ul li { font-weight: normal; background: #C8E4ED; color: #000; border-bottom: 1px solid #ccc; float: none; } /* IE 6 & 7 Needs Inline Block */ul.dropdown ul li a { border-right: none; width: 100%; display: inline-block; } I have tried a wide variety of things but to be honest I was more or less guessing, and I would like to understand what's the problem.I would have though adding a negative padding to the LEVEL TWO elements would have solve the issue but it doesn't so any pointers could help.EDIT: The header markup is the following: <div id="header"> <div id="header-container"> <div id="header-all"> <a href="http://stackoverflow.com/questions/14610272/#"><img id="logo" src="http://stackoverflow.com/questions/14610272/<?php bloginfo('template_url'); ?>/img/logo.png" alt="logo uruware"/></a> <ul id="header-elements" class="dropdown"> <li><a href="http://stackoverflow.com/questions/14610272/#" class="active-selection">Inicio</a> <ul class="sub_menu"> <li><a href="http://stackoverflow.com/questions/14610272/#1">UCFE</a></li> <li><a href="http://stackoverflow.com/questions/14610272/#2">Trx Server</a></li> <li><a href="http://stackoverflow.com/questions/14610272/#3">Trx Framework</a></li> </ul> </li> <li><a href="http://stackoverflow.com/questions/14610272/#">Qui