html - 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 悬停