Dropdown menu disappears on hover (Firefox) - html

Question

I have a button than on hover has a dropdown menu associated with it. This works perfectly fine on chrome and I can select items from the dropdown but on Firefox the behaviour is different where the dropdown disappears as I leave the button to click on a dropdown item.
Here is my CSS and a JS fiddle attached.
button {
position:relative;
}
.flags_home_middle {
top: 68%;
right: 23%;
left: inherit;
}
.flags_item_features {
-webkit-transition-duration: .8s;
transition-duration: .8s;
opacity: 0;
visibility: hidden;
padding: 3px !important;
width: 211px;
position: absolute;
top: 51%;
left: 23%;
}
.flags_item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.flags_home_middle {
top: 68%;
right: 23%;
left: inherit;
}
.flags_item_features {
-webkit-transition-duration: .8s;
transition-duration: .8s;
opacity: 0;
visibility: hidden;
padding: 3px !important;
width: 211px;
position: absolute;
top: 51%;
left: 23%;
}
.flags_item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.btn_buy_features:hover .flags_item_features {
opacity: 1;
visibility: visible;
background: #EBEBEB;
box-shadow: 0 3px 9px -2px rgba(0, 0, 0, .5);
}
https://jsfiddle.net/3nn7pc21/

Answer 1

It seems to me that Firefox doesn't consider children of interactive elements with new stacking context when using hover. To overcome this I've put your whole menu alongside the button and made your container serve as a relative parent. Also I've increased the safe zone a bit using pseudo-element.
https://jsfiddle.net/3nn7pc21/4/
button {
position:relative;
}
.buy-button-wrapper
{
position: relative;
}
.flags_home_middle {
top: 68%;
right: 23%;
left: inherit;
}
.flags_item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.flags_home_middle {
top: 68%;
right: 23%;
left: inherit;
}
.flags_item_features {
-webkit-transition-duration: .8s;
transition-duration: .8s;
opacity: 0;
visibility: hidden;
padding: 3px !important;
width: 211px;
position: absolute;
top: 10px;
left: 10px;
}
.flags_item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.btn_buy_features:hover + .flags_item_features,
.flags_item_features:hover
{
opacity: 1;
visibility: visible;
background: #EBEBEB;
box-shadow: 0 3px 9px -2px rgba(0, 0, 0, .5);
}
.flags_item_features:before
{
content: "";
display: block;
position: absolute;
left: -10px;
top: -10px;
right: -10px;
bottom: -10px;
}
<div class="buy-button-wrapper">
<button type="button" class="btn-buy btn_buy_features custom_btn active" style="margin: 0 auto;">BUY</button>
<div class="flags_item flags_item_features flags_home_middle">
<div class="border_link">
<span class="country_name"> <img src="/wp-content/uploads/2017/01/1_2_2.png">US</span>
</div>
<div class="border_link">
<span class="country_name"> <img src="/wp-content/uploads/2017/01/1_2_3.png">EU</span>
</div>
<div class="border_link">
<span class="country_name"> <img src="/wp-content/uploads/2017/01/1_2_1.png">UK</span>
</div>
</div>
</div>

Answer 2

I don't know how appropriate is this!! But removing "will-change:transform" a default behavior of dropdown-menu (bootstrap) worked for me.