переопределить родительское переполнение: скрыто с дочерним переполнением: видимое

У меня есть заголовок, который является родителем навигатора и логотипа. Я установил родительский переполнения: скрытый, поэтому я смог добавить margin-top на nav, чтобы заставить его сидеть внизу. Однако он также зажимает логотип. Я пытался следовать этому вопросу... Переполнение переполнения: скрыто

поэтому попытался установить логотип на переполнение: видимый, но это тоже не сработало. Я не уверен ни в каком другом решении, кроме логотипа, который не находится в родительском контейнере.

Вот мой код

CSS:

.container {
width: 960px;
margin:0 auto;
background-color: blue;
}

header {
height: 100px;
background-color: #001D5D;
position: relative;
overflow: hidden;

}

#logo {
height:100px;
width:100px;
z-index:10;
top:0px;
position: absolute;
overflow: visible;
}

nav {
    background-color:#1CCEAE;
    margin-top:63px; 
}

nav ul {
width:100%;
line-height: 37px;
    text-align:right;
    background-color:#1CCEAE; 

 }

ul li {
display: inline-block;
margin-right: 20px;
}

ul li a {
text-decoration: none;
font-size: 1em;
color:white;    
}

Вот скрипка http://jsfiddle.net/XS3Zs/