CODEWITHSUNDEEP
htmlcss
4lackof
4lackof

Reputation: 1390

CSS - overflow: hidden to not cover dropdown

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.

Upvotes: 0

Views: 239

Answers (2)

pol
pol

Reputation: 2701

The way I see it, you have 3 options

  1. You can try adding margin-left/right to the hor-nav. .hor-nav { margin: auto 128px; }
  2. 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); }
  3. And third, is to add a background color to the .user-info

Upvotes: 1

Bryan
Bryan

Reputation: 3494

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)

Upvotes: 1

Related Questions