ホバー上のドロップダウンメニューが消えます（Firefox）

Question

ホバー上のボタンよりもボタンがあります。ホバー上にドロップダウンメニューがあります。これはクロムで完璧に動作し、ドロップダウンからアイテムを選択できますが、Firefoxではドロップダウンアイテムをクリックするとドロップダウンが消える場所が異なります。

ここに私のCSSとJSフィドルが添付されています。

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

ホバーを使用するときにFirefoxが新しいスタッキングコンテキストとのインタラクティブな要素の子を考慮していないように私には思えます。これを克服するために、ボタンの横にメニュー全体を置き、コンテナを親として扱いました。また、擬似要素を使用してセーフゾーンを少し増やしました。

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>