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

时间：2017-12-21 20:05:15

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

我有一个按钮而不是悬停有一个与之关联的下拉菜单。这在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/

3 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

我使用下拉div中的css ul列创建了一个半大型菜单。在这里，我在下拉div中添加了2个CSS列。将鼠标悬停在第一列中时，各项正常运行（显示以CSS样式设置的悬停动作）。但是，当我在第二列中悬停项目时，这些项目会自动从视图中隐藏，直到我悬停同一菜单。该问题仅在MOZILLA FIREFOX Web浏览器中可见。我不明白为什么它们会自动隐藏。我在这里分享我的HTML和CSS代码。

我希望第一列和第二列的行为相同。

我的代码可以正常使用here

我可以为此解决办法吗。 这是MOZILLA FIREFOX的唯一问题。.GOOGLE CHROME确实显示了预期的结果...

导航菜单HTML 

nav{
    
        height: 60px;
        overflow: hidden;
        font-size: 16px;
        text-decoration: none;
        background-color: #191642; 
        font-family: Raleway; 
        color: #fff;
      
       
    }
    
    nav h2,h5
    {
    
    	float: left;
    	margin: 0px;
    }
    
    nav h5
    { 
    	position: relative;
    	top: 30px;
    	left: -170px;
    	width: 280px;
    }
    
    nav a {
        float: left;
        font-size: 16px;
        color: #fff;
        text-align: center;
        padding: 20px 16px;
        text-decoration: none;
    }
    
    nav .head {
        padding: 7px;
    }

    nav a.head:hover {
        background: none;
        color: #fff;
        text-shadow: 1px 2px 10px #fff;
    }
    
    .dropdown {
        display: inline;
        float: left;
        overflow: hidden;
    }
    
    .dropdown .dropbtn {
        font-size: 16px;    
        border: none;
        outline: none;
        color: #fff;
        padding: 20px 16px;
        background-color: #191642;
        font-family: Raleway;
    }
    
    nav a:hover, .dropdown:hover .dropbtn {
        background: #fff;
    	color: #191642;
    	text-shadow: 0px 0px 9px #191642;
    }
    
    .dropdown-content
    {
        display: none;
        position: absolute;
        background-color: #fff;
        min-width: 500px;
        box-shadow: 0px 8px 16px 0px #191642;
        z-index: 1;
    }
    
    .dropdown-content ul
    {
         columns: 2;
         list-style-type: none;
         padding: 10px;
         margin: 0px;
    }

    .dropdown-content ul li a 
    {
        color: #191642;
        padding: 10px 10px;
        text-decoration: none;
        display: block;
        text-align: left;
    }
    
    .dropdown-content ul li a:hover {
        background-color: #191642;    /*#4E5D66 GREYISH COLOR */
        color: #fff;
        text-shadow: 1px 2px 9px #fff;
    }
    
    .dropdown:hover .dropdown-content {
        display: block;
    }
    <nav>   	
        	<a href="./home.php" class="head"><h2>App name</h2>
        	<h5>Tagline for app name</h5></a>
        
        	<div class="dropdown">
        
            		<button class="dropbtn">Dropdown 1<i class="fa fa-caret-down"></i></button>
         		<div class="dropdown-content">
        				<ul>
        				
        				<li><a href="./page">Option 1</a></li>
        				<li><a href="./page">Option 2</a></li>
              				<li><a href="./page">Option 3</a></li>
        				<li><a href="./page">Option 4</a></li>
        				<li><a href="./page">Option 5</a></li>
        				<li><a href="./page">Option 6</a></li>
                  </ul>				 				
            		</div>
        			
        			
               </div>  
        	
        <a href="logout.php">Log out <i class="fa fa-sign-out"></i></a>
        
          
        </div>
        
        </nav>

答案 2 :(得分：0)

我不知道这有多合适！但是删除“ will-change：transform”的默认行为dropdown-menu（bootstrap）对我有用。

相关问题
最新问题