我有以下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-colorhor-nav不会溢出到其他div中,但也允许dropdown被激活并起作用

谢谢。

最佳答案

最简单的方法,只需最少的代码更改即可为user-info区域提供背景颜色。由于hor-nav部分在z-index上较低,这将给您所需的视觉效果,尽管该条仍将位于user-info部分下,它似乎不会出现,并且下拉菜单将像现在一样起作用。

根据您的查询,您可以通过对所有3个元素使用基于百分比的宽度来另一种方式,使它们彼此不重叠。请参见此fiddle进行代码更改(请注意,我会稍微更改标记顺序,宽度和添加的框大小css属性)

07-24 09:50
查看更多