我有以下CSS和HTML:
body { background-color: #c0c0c0; }
.title-bar, { background-color: #999; color: white; float: left; overflow: hidden; }
.title-bar {
border-bottom: 1px solid white;
height: 128px;
width: 100%;
}
.logo, .user-info { box-sizing: content-box; height: 100%; width: 128px; }
.logo{
align-items: center;
background-color: #369;
border-right: 1px solid white;
display: flex;
float: left;
font-size: 2em;
font-kerning: none;
justify-content: center;
}
.user-info {
align-items: center;
border-left: 1px solid white;
display: flex;
float: right;
justify-content: space-between;
flex-flow: column nowrap;
}
.user-info .circle {
border: 2px solid #369;
border-radius: 50%;
display: inline-block;
flex: 0 0 auto;
height: 32px;
margin: 8px 8px;
overflow: hidden;
transition: border 0.15s ease-out;
width: 32px;
}
.user-info .circle:hover { border-width: 4px; }
.user-info .container {
border-top: 1px solid white;
display: flex;
justify-content: center;
margin-top: 6px;width: 100%;
}
.hor-nav { background-color: #404040; }
.option { display: inline-block; position: relative; }
.hor-nav .option:hover {background-color: #369; }
.option a {
color: white;
display: inline-block;
font-size: 1em;
padding: 14px;
text-align: center;
transition: background-color 0.15s ease-out;
}
.option .dropdown { display: none; position: absolute; }
.option:hover .dropdown{ display: block; }
.dropdown a {
display: block;
text-align: left;
width: 100%;
}
<div class="title-bar">
<a class="logo" href="#">
</a>
<div class="user-info">
<a href="#" class="circle"></a>
<span>User name</span>
<div class="container">
<a href="#" class="circle"></a>
<a href="#" class="circle"></a>
</div>
</div>
<div class="hor-nav">
<div class="option">
<a href="">OPTION 1</a>
<div class="dropdown">
<a href="#">ITEM 1</a>
</div>
</div>
</div>
</div>
如您所见,
hor-nav
栏的颜色溢出到user-info
区域。我对此进行了研究,发现如果设置
overflow-x: hidden;
则不会这样做(请参见this文章)。我已经尝试过,这是真的-导航栏不会溢出到
user-info
中,但是,当您将鼠标悬停在导航栏之一options
上时,dropdown
不会下降,而是vert-nav
会您一个滚动条(请参见this jsfiddle)。另外,如果您执行
overflow-y: hidden;
,则根本没有滚动条。我试图得到它,以使
background-color
的hor-nav
不会溢出到其他div中,但也允许dropdown
被激活并起作用谢谢。
最佳答案
最简单的方法,只需最少的代码更改即可为user-info
区域提供背景颜色。由于hor-nav
部分在z-index上较低,这将给您所需的视觉效果,尽管该条仍将位于user-info
部分下,它似乎不会出现,并且下拉菜单将像现在一样起作用。
根据您的查询,您可以通过对所有3个元素使用基于百分比的宽度来另一种方式,使它们彼此不重叠。请参见此fiddle进行代码更改(请注意,我会稍微更改标记顺序,宽度和添加的框大小css属性)