Trying to create a drop-down menu with overflow options that extend into the next section upon hover. The goal is for users to be able to click on "Join Now" or "Learn More," but currently, the buttons disappear when moving down.
HTML Code:
<div class="partner-boxes">
<div class="partner-box green">
<div class="partner-box-header text-uppercase">
New<br /> Partners
</div>
<div class="partner-buttons">
<a href="#">Join Now</a>
<a href="#">Learn More</a>
</div>
</div>
CSS Code:
.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);
}
... (CSS continues)
https://i.sstatic.net/306jz.png
Struggling to keep hover items visible without disrupting the design. Any suggestions?