悬停时下拉菜单消失（Firefox）答案

【问题标题】：Dropdown menu disappears on hover (Firefox)悬停时下拉菜单消失（Firefox）
【发布时间】：2018-06-04 13:08:45
【问题描述】：

我有一个按钮，而不是悬停时有一个与之关联的下拉菜单。这在 chrome 上工作得很好，我可以从下拉列表中选择项目，但在 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/

【问题讨论】：

标签： html css firefox drop-down-menu hover

【解决方案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>

【讨论】：

【解决方案2】：

我不知道这有多合适！但是删除“will-change：transform”下拉菜单（引导程序）的默认行为对我有用。

【讨论】：