I am facing an issue where a button with a dropdown menu that appears on hover works perfectly fine in Chrome, but in Firefox the dropdown disappears when I try to select an item from it. Here is my CSS and JS fiddle for reference.
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;
}
.btn_buy_features:hover .flags_item_features {
opacity: 1;
visibility: visible;
background: #EBEBEB;
box-shadow: 0 3px 9px -2px rgba(0, 0, 0, .5);
}