Firefox：将鼠标悬停在带有下拉按钮的按钮上时，将鼠标移到下面时会隐藏下拉框

Question

我有一个相当典型的下拉标记，主要区别在于容器是按钮而不是div，这似乎是Firefox中问题的主要原因。该按钮中包含一个列表，当我将鼠标悬停在按钮上时，列表显示正常。但是当我开始移动到下拉列表时，停用按钮上的悬停。如果我使用DIV元素而不是BUTTON，那么它在两个浏览器中都可以正常工作。下面是我使用的代码（plnkr：plnkr.co）

<!--Using 'button': does not work in Firefox--> 
<button class="button"> 
    button text: this doesn't work in Firefox but works in Chrome 
    <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     ... 
    </ul> 
</button> 

<!--Switching to 'div': works fine--> 
<div class="button"> 
    switching to DIV: this works as expected 
    <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
     ... 
    </ul> 
</div>  

相关CSS：

.button { 
    position: relative; 
} 

.button > ul { 
    display: none; 
    position: absolute; 
} 

.button:hover > ul { 
    top: 100%; 
    left: 0; 
    display: block; 
} 

这将是巨大的，如果有人可以帮助我弄清楚，为什么这种行为是在Chrome和Firefox不同。

Answer 1

我不会在按钮内部推荐ul。所以你可以做两件事来实现你的目标。

1 - 按钮后列表：

<!-- HTML --> 
<button class="button">Button</button> 
<ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
</ul> 
<!-- CSS --> 
button+ul { 
    display: none; 
} 
button:hover+ul { 
    display: block; 
} 

此作品（check demo），然而，你将不能够悬停在UL（你可能需要）。

2 - 把它包一个div

<!-- HTML --> 
<div class="buttonClass"> 
    <button>Button</button> 
    <ul> 
     <li>Item 1</li> 
     <li>Item 2</li> 
    </ul> 
</div> 
<!-- CSS --> 
.buttonClass>ul { 
    display: none; 
} 
.buttonClass:hover>ul { 
    display: block; 
} 

内通过这种方式（check demo），可以将鼠标悬停在UL