4lackof 4lackof - 1 year ago 133
CSS Question

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; }
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="#">
<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 class="hor-nav">
<div class="option">
<a href="">OPTION 1</a>
<div class="dropdown">
<a href="#">ITEM 1</a>

as you can see, the
bar's color spills onto the

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
but, when you hover over one of the nav bar
, the
does not come down but instead the
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
of the
does not spill into other div's, but also allows the
to be activated and work

thank you.

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download