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