html - 覆盖父级溢出 :hidden with child overflow:visible

Question

我有一个 header ，它是导航和 Logo 的父级。我已将父级设置为溢出:隐藏，因此我能够将 margin-top 添加到导航中以使其位于底部。但是，它也会剪辑 Logo div。我试着按照这个问题... Overriding overflow: hidden

因此尝试将 Logo 设置为溢出:可见，但也没有用。除了 Logo 不在父容器中之外，我不确定是否有任何其他解决方案。

这是我的代码

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;    
}

这是一个 fiddle http://jsfiddle.net/XS3Zs/

Answer 1

删除 width:100%至 ul或重置 padding至 0至 ul .

<ul>并不需要 width:100%;因为它是 block元素，它将使用所有 width avalaible.，宽度设置为 100% 可能太多了。不会估计边框、边距和填充。