Dropdown-Menü verschwindet bei Hover (Firefox)

Question

Ich habe eine Schaltfläche als auf Hover hat ein Dropdown-Menü zugeordnet. Das funktioniert ganz gut bei Chrome und ich kann Elemente aus dem Dropdown auswählen, aber bei Firefox ist das Verhalten anders, wo das Dropdown verschwindet, wenn ich den Button belasse, um auf ein Dropdown-Element zu klicken.

Hier ist meine CSS und eine JS Geige angeschlossen.

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

Es scheint mir, dass Firefox nicht Kinder von interaktiven Elementen mit neuem Stapelkontext berücksichtigen, wenn Hover verwenden. Um das zu überwinden, habe ich dein ganzes Menü neben den Button gelegt und deinen Container als relativen Elternteil benutzt. Auch habe ich die Sicherheitszone ein wenig mit Pseudo-Element erhöht.

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"> <a href="http://shop-us.foobot.io/cart/add?id=8739494597" class="flag_lins"><img src="/wp-content/uploads/2017/01/1_2_2.png">US</a></span> 
 
    </div> 
 
    <div class="border_link"> 
 
     <span class="country_name"> <a href="http://shop-eu.foobot.io/cart/add?id=8346318915" class="flag_lins"><img src="/wp-content/uploads/2017/01/1_2_3.png">EU</a></span> 
 
    </div> 
 
    <div class="border_link"> 
 
     <span class="country_name"> <a href="http://shop-eu.foobot.io/cart/add?id=8819215683" class="flag_lins"><img src="/wp-content/uploads/2017/01/1_2_1.png">UK</a></span> 
 
    </div> 
 
    </div> 
 
</div>