There are three buttons arranged in a row, and when one is hovered over, dropdown content appears underneath all three buttons. However, the content disappears when the mouse moves down to it. Unfortunately, images cannot be posted inside yet** https://i.sstatic.net/ipqYZ.jpg https://i.sstatic.net/5wigq.jpg
I have attempted moving the dropdown content into the same divs, but I am unable to make the content take up the entire bottom space. It seems like I may need to reconstruct everything. Apologies if this question does not make sense
class DropDown {
constructor() {
// Cards
this.serveCard = $('#serve-card');
this.protectCard = $('.protect-card');
this.commercialCard = $('#commercial-card');
// Dropdown Area for Cards
this.dropServe = $('#serve-card-dropdown');
this.dropProtect = $('#protect-card-dropdown');
this.dropCommercial = $('#commercial-card-dropdown');
// Dropdown Container
this.dropDownContainer = $('#drop_down_container');
this.events();
}
events() {
this.protectCard.hover(this.dropDownIn.bind(this.dropProtect),
this.dropDownOut.bind(this.dropProtect));
this.serveCard.hover(this.dropDownIn.bind(this.dropServe),
this.dropDownOut.bind(this.dropServe).bind(this));
this.commercialCard.hover(this.dropDownIn.bind(this.dropCommercial),
this.dropDownOut.bind(this.dropCommercial));
// Style Cards On Hover
this.protectCard.hover(this.styleCard.bind(this.protectCard),
this.styleCard.bind(this.protectCard));
this.serveCard.hover(this.styleCard.bind(this.serveCard),
this.styleCard.bind(this.serveCard));
this.commercialCard.hover(this.styleCard.bind(this.commercialCard),
this.styleCard.bind(this.commercialCard));
}
dropDownIn() {
this.removeClass('inactive');
}
dropDownOut() {
this.addClass('inactive');
}
styleCard() {
this.toggleClass('inactive');
}
}/* Dropdown Menu --------- */
.blue_card {
border: 2px solid white;
margin: 0px 1% 0 1%;
padding-top: 25px;
background-color: rgb(0, 119, 204);
color: white;
border-bottom: none;
}
.blue_card.inactive {
background-color: rgba(88, 128, 155, 0.424);
border-bottom: none;
}
.drop-down-cont {
position: relative;
}
.drop-down {
background-color: rgb(0, 119, 204);
margin-right: 10px;
margin-left: 1%;
position: absolute;
top: 0;
height: 100px;
width: 98%;
transition: height 500ms;
border-right: 2px solid white;
border-left: 2px solid white;
border-top: 2px solid white;
border-bottom: 2px solid white;
color: white;
}
.drop-down.inactive {
height: 0;
transition: height 500ms;
font-size: 0;
border-bottom: none;
border-top: none;
}<div class="row blue-card-cont">
<div id='protect-card' class="protect-card col blue_card inactive">
<h5>PROTECT</h5>
<p>PROTECT WITH COPYRIGHT</p>
</div>
<div id='serve-card' class="col blue_card inactive">
<h5>SERVE</h5>
<p>PROTECT DATA ENTRY. KILL THREATS</p>
</div>
<div id='commercial-card' class="col blue_card inactive">
<h5>COMMERCIALISE</h5>
<p>CREATE NEW BUSINESS</p>
</div>
</div>
<div id='#drop_down_container' class="drop-down-cont">
<div id='protect-card-dropdown' class="drop-down inactive">
<p>Protect</p>
</div>
<div id='serve-card-dropdown' class="drop-down inactive">
<p>Serve</p>
</div>
<div id='commercial-card-dropdown' class="drop-down inactive">
<p>Commercial</p>
</div>
</div>