HTML/CSS - 讓孩子呆在家長裏面嗎？

Question

此網站的標題展開懸停，揭示隱藏的span。 但是，這些圖像，假設順利揭示，有點滯後於標題。 這很難解釋，只是看看：http://jsfiddle.net/56t9r/

.header { 
    background:#FFF; 
    border-bottom:1px solid gray; 
    box-shadow:0 0 10px; 
    height:70px; 
    position:fixed; 
    top:0px; 
    width:100%; 
    z-index:2; 
    transition: height 1s ease; 
} 
.header:hover { 
    height: 120px; 
    transition: height 1s ease; 
} 
.kielet { 
    top:0px; 
    width:100%; 
    background: rgb(255, 255, 255); 
    /* Old browsers */ 
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%); 
    /* FF3.6+ */ 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(229, 229, 229, 1))); 
    /* Chrome,Safari4+ */ 
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%); 
    /* Chrome10+,Safari5.1+ */ 
    background: -o-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%); 
    /* Opera 11.10+ */ 
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%); 
    /* IE10+ */ 
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(229, 229, 229, 1) 100%); 
    /* W3C */ 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e5e5e5', GradientType=0); 
    /* IE6-9 */ 
    padding:0px; 
    height: 0px; 
    box-shadow: 0 4px 2px -2px gray; 
    color: red; 
    transition: height 1s ease; 
} 
.kielet nav { 
    text-align: center; 
    height: 0px; 
    position: static; 
    transition: height 1s ease; 
} 
.header:hover > .kielet nav { 
    height:50px; 
    position: static; 
} 
.kielet a { 
    display: inline; 
    left: 0px; 
} 

Answer 1

Fiddle

.header { 
    overflow: hidden; 
    ... 
} 

.header ：懸停 **

.header .kielet nav { 
    height: 50px; 
    position: static; 
}