Show Drowdown items while using overflow hidden - html

Question

I've used overflow: hidden to make my layout fluid. Please see (following code) the top right button named Dropdown Menu. This is what needs to be fixed.
Please see the following code for reference.
* {
padding: 0;
margin: 0;
}
*:focus {
outline: 0;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
a {
text-decoration: none;
color: inherit;
}
body {
font: 14px/18px Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.dropdown-box {
position: relative;
}
.dropdown-box:hover .dropdown-menu {
display: block;
}
.dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
}
.overlay-block {
display: none;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
position: absolute;
top: 0;
left: 0;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
transition: all 0.2s;
}
.position-center {
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
}
.profile-header {
display: block;
}
.profile-cover {
height: 100px;
background-color: rgba(0, 0, 0, 0.5);
}
.profile-header-content {
padding-bottom: 15px;
margin-top: -72px;
position: relative;
}
.profile-header-content:after {
content: '';
clear: both;
display: block;
}
.profile-user-image,
.profile-user-video {
width: 140px;
height: 140px;
background-color: rgba(234, 234, 234, 0.5);
color: #fff;
padding: 5px;
margin: 0 15px;
overflow: hidden;
position: relative;
}
.profile-user-image:hover .overlay-block,
.profile-user-video:hover .overlay-block {
display: block;
}
.profile-user-image:active .overlay-block,
.profile-user-video:active .overlay-block {
background: rgba(0, 0, 0, 0.95);
}
.profile-user-image img,
.profile-user-video img {
display: block;
width: 100%;
}
.profile-center-content {
overflow-x: hidden;
overflow-y: visible !important;
}
<div class="profile-header">
<div class="profile-cover"> </div>
<div class="profile-header-content">
<a class="profile-user-image float-left" href="javascript:;">
<div class="overlay-block">
<div class="position-center">Overlay</div>
</div>
</a>
<a class="profile-user-video float-right" href="javascript:;">
<div class="overlay-block">
<div class="position-center">Overlay</div>
</div>
</a>
<div class="profile-center-content">
<div class="float-left">
Lorem Ipsum
</div>
<div class="float-right">
<div class="dropdown-box">
Dropdown Menu
<ul class="dropdown-menu">
<li>Home
</li>
<li>About
</li>
<li>Services
</li>
</ul>
</div>
</div>
</div>
</div>
</div>

Answer 1

when you are using position: absolute; the element goes out of the scope. so remove it from .dropdown-menu so it stay's in the scope of profile-center-content and not considered out of it so it get's scrolled.
* {
padding: 0;
margin: 0;
}
*:focus {
outline: 0;
}
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
a {
text-decoration: none;
color: inherit;
}
body {
font: 14px/18px Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.dropdown-box {
position: relative;
}
.dropdown-box:hover .dropdown-menu {
display: block;
}
.dropdown-menu {
display: none;
}
.overlay-block {
display: none;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
position: absolute;
top: 0;
left: 0;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
transition: all 0.2s;
}
.position-center {
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
left: 50%;
}
.profile-header {
display: block;
}
.profile-cover {
height: 100px;
background-color: rgba(0, 0, 0, 0.5);
}
.profile-header-content {
padding-bottom: 15px;
margin-top: -72px;
position: relative;
}
.profile-header-content:after {
content: '';
clear: both;
display: block;
}
.profile-user-image,
.profile-user-video {
width: 140px;
height: 140px;
background-color: rgba(234, 234, 234, 0.5);
color: #fff;
padding: 5px;
margin: 0 15px;
overflow: hidden;
position: relative;
}
.profile-user-image:hover .overlay-block,
.profile-user-video:hover .overlay-block {
display: block;
}
.profile-user-image:active .overlay-block,
.profile-user-video:active .overlay-block {
background: rgba(0, 0, 0, 0.95);
}
.profile-user-image img,
.profile-user-video img {
display: block;
width: 100%;
}
.profile-center-content {
overflow-x: hidden;
overflow-y: visible !important;
}
<div class="profile-header">
<div class="profile-cover"> </div>
<div class="profile-header-content">
<a class="profile-user-image float-left" href="javascript:;">
<div class="overlay-block">
<div class="position-center">Overlay</div>
</div>
</a>
<a class="profile-user-video float-right" href="javascript:;">
<div class="overlay-block">
<div class="position-center">Overlay</div>
</div>
</a>
<div class="profile-center-content">
<div class="float-left">
Lorem Ipsum
</div>
<div class="float-right">
<div class="dropdown-box">
Dropdown Menu
<ul class="dropdown-menu">
<li>Home
</li>
<li>About
</li>
<li>Services
</li>
</ul>
</div>
</div>
</div>
</div>
</div>