How to have hover dropdown maintain active status for clicking? - html

Question

So I'm trying to make a drop down with options below it that overflow onto the next section when hovering. At this point the user should be able to click on Join Now/Learn More. Except the moment they move down the buttons disappear.
My code looks like the following:
Here's the HTML:
<div class="partner-boxes">
<div class="partner-box green">
<div class="partner-box-header text-uppercase">
New<br /> Partners
</div>
<div class="partner-buttons">
Join Now
Learn More
</div>
</div>
Here's the CSS:
.partner-boxes {
float: right;}
div.partner-box {
float: left;
position: relative;
.partner-box-header {
font-size: 28px;
font-weight: bold;
padding: 22px;
line-height: 24px;
margin: 0 0 -52px;
}
&.green .partner-box-header {
background: rgba(108, 192, 74, .65);
}
a {
border: 1px solid #fff;
color: #fff;
display: block;
font-size: 16px;
margin: 9px 0;
padding: 9px 0;
text-align: center;
}
.partner-buttons {
padding: 13px 22px;
display: none;
width: 100%;
z-index: 1;
position: absolute;
top: 92px;
min-height: 140px;
a:hover {
text-decoration: none;
background-color: rgba(255, 255, 255, .1);
}
}
&:hover {
.partner-buttons {
display: block;
}
}
&.green .partner-buttons {
background: rgba(108, 192, 74, 1);
}
&.light-blue .partner-buttons {
background: rgba(79, 193, 224, 1);
}
.partner-button {
border: 1px solid #fff;
color: #fff;
display: inline-block;
font-size: 16px;
margin: 9px 0 30px;
padding: 9px 30px;
text-align: center;
&:hover {
text-decoration: none;
background-color: rgba(255, 255, 255, .1);
}
}
.find-a-partner {
padding: 40px 0;
h2 {
color: #3e8ede;
margin-bottom: 1em;
}
.partner {
width: 338px;
height: 131px;
float: left;
border: 1px solid #3e8ede;
text-align: center;
margin: 0 0 28px 0;
max-width: 100%;
img {
max-height: 100px;
#include vertical-align();
}
}
}
#media screen and (max-width:767px) {
//sm-devices & hamburger menu activated
.banner.partner {
background: #3e8ede;
max-height: none;
h1 {
text-shadow: none;
color: #fff;
}
}
.partner-boxes {
float: none;
margin: 50px 0 0;
.partner-box {
float: left;
width: 30%;
border: 1px solid #fff;
&.airclass-blue {
border: 1px solid #fff;
}
&.green .partner-box-header {
background: rgba(108, 192, 74, 1);
}
.partner-box-header {
margin: 0px;
}
.partner-buttons {
display: block;
margin-bottom: 30px;
position: relative;
top: 0;
}
}
}
}
#media screen and (max-width:600px) {
.partner-boxes {
float: none;
margin: 50px 0 0;
.partner-box {
float: left;
width: 50%;
}
}
}
#media screen and (max-width:480px) {
// col-xs
.partner-boxes {
.partner-box {
float: none;
width: 100%;
}
}
.benefits {
.benefit {
width: 100%;
margin: 16px 0;
}
}
.contact-channel-team {
text-align: center;
.container {
background-image: none;
}
}
}
I've no idea how to get the hover items to stick. I've tried adjusting positions on the partner-box that just greatly messes up the design. Any thoughts?

Answer 1

Changed this section:
.partner-buttons {
padding: 13px 22px;
display: none;
width: 100%;
z-index: 2;
position: absolute;
top: 69px;
min-height: 140px;
a:hover {
text-decoration: none;
background-color: rgba(255, 255, 255, .1);
}
}
&:hover {
.partner-buttons {
display: block;
}
The gap was causing the issue so I decreased the top spacing from 92 to 69px.