覆蓋父溢出：隱藏，子溢出：可見

Question

我有一個標題，它是導航和徽標的父級。 我已將父級設置為overflow：hidden，因此我可以在導航欄上添加邊距頂部，使其位於底部。 但是，它也會剪輯徽標div。 我正在嘗試遵循此問題... 覆蓋溢出：隱藏

因此嘗試將徽標設置為“ overflow：visible”，但這也沒有用。 除了徽標不在父容器中之外，我不確定是否有其他解決方案。

這是我的代碼

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/

Answer 1

刪除width:100%到ul或將padding重置為0到ul 。

<ul>並不需要width:100%; 因為它是一個block的元件，但是使用所有width avalaible。，寬度設定為100％可能過多。 不會估計邊框，邊距和填充。

Answer 2

UL元素默認具有padding-left:40px; 因此，如果將其設置為0，就可以了。

我更新了您的[FIDDLE]