2

私はかなり典型的なドロップダウン マークアップを持っていますが、主な違いはコンテナが div ではなくボタンであることです。これが Firefox の問題の主な原因と思われます。ボタンにはリストが含まれており、ボタンの上にカーソルを合わせると、リストが正常に表示されます。しかし、ドロップダウン リストに移動し始めると、ボタンのホバーが非アクティブになります。BUTTON の代わりに DIV 要素を使用すると、両方のブラウザーで正常に動作します。これが私が使用しているコードです（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 で異なる理由を誰かが理解してくれると助かります。

4

1 に答える 1