Cambia el header-li a display: block;.
Agregale opacity: 0; y filter: alpha(opacity=0);
Ahí ya lo vas a tener en invisibles aunque te van a ocupar lugar, podés hacer un position: absolute; para que no aparezca en el lugar donde están, ya que estará flotando.
Allí al final, en el hover, le aplicás opacity: 1.0; y filter: alpha(opacity=100);
Entonces te quedaría:
Código CSS:
Ver original.header-li{
list-style:none;
display: block;
z-index:100;
opacity: 0;
filter: alpha(opacity: 0);
position: absolute;
-webkit-transition: opacity 0.5s 0.5s linear; /* Esto va a ser que tarde 500ms en activarse y 500ms entre que va cambiando de opacidad 0 a opacidad 100. El primer valor es el tiempo de transición, el segundo es el delay. */
-moz-transition: opacity 0.5s 0.5s linear;
transition: opacity 0.5s 0.5s linear;
}
[...]
ul.header-ul:hover > ul.header-li{
opacity: 1.0;
filter: alpha(opacity=100);
}
No lo probé pero casi seguro que funciona bien, igualmente espero tu respuesta :D