CSS - overflow: hidden to not cover dropdown

Question

I have the following CSS and 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>

as you can see, the hor-nav bar's color spills onto the user-info area.

I have researched this and found that if I set overflow-x: hidden; it will not do this (see this article).

I have tried that and it is true - the nav bar does not spill into the user-info but, when you hover over one of the nav bar options, the dropdown does not come down but instead the vert-nav gives you a scroll bar (see this jsfiddle).

Additionally, if you do overflow-y: hidden; there is no scroll bar at all.

I am trying to get it so that the background-color of the hor-nav does not spill into other div's, but also allows the dropdown to be activated and work

thank you.

You floated user-info, so it's (mostly) removed from document flow calculations. That lets the hor-nav expand to the full available space, which INCLUDES the space occupied by your user-info - user-info's not included in the width calculations. — Marc B, Aug 17 '16 at 18:52

Bryan · Accepted Answer · 2016-08-17T20:26:52.233

1

The easiest way to to this with least code change is to just give the user-info area a background color. Since the hor-nav section is lower on the z-index this will give the visual affect you want although the bar will still be under the user-info section it won't appear to be and the drop down will funtion as it does now.

Per your inquiry, you could do this another way by using percentage based widths for all 3 elements so they don't overlap eachother. Please see this fiddle for code change (note I change the markup order slightly, widths, and added box sizing css property)

edited Aug 17 '16 at 20:26

answered Aug 17 '16 at 18:58

Bryan

3,449
1
19
23

thank you. yes I had thought about this but was apprehensive in applying this as it would mean setting the same background-color twice (I know - think of all the micro-seconds wasted - but right now there is a big push where I am to have the least amount of wasteful code possible). If this is the only way then I will do it, but maybe there is another way? – 4lackof Aug 17 '16 at 19:02
1

@4lackof - yes, I added another way of doing it. Please see my updated answer. – Bryan Aug 17 '16 at 20:27

pol · Answer 2 · 2016-08-18T01:59:16.977

1

The way I see it, you have 3 options

You can try adding margin-left/right to the hor-nav. .hor-nav { margin: auto 128px; }
Another option is to set a certain width to the .hor-nav. Or practically cut the width of it. .hor-nav { width: calc(100% - 128px); }
And third, is to add a background color to the .user-info

edited Aug 18 '16 at 01:59

answered Aug 17 '16 at 19:13

pol

2,641
10
16

CSS - overflow: hidden to not cover dropdown

2 Answers2