4lackof 4lackof - 3 months ago 11
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; }
.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.

Answer

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.

Comments