HTML CSS z-index

Question

我有两个下拉菜单，如下例所示：

将鼠标悬停在第一个下拉菜单上，第二个的文本仍然可见。为什么？

<div class="dropdown">
    <div class="dropbtn">
      <a>dropdown!</a>
    </div>
    <div class="dropdown-content">
        <a class="firstA" href="#">Item1</a>
        <a href="#">Item2</a>
    </div>
</div>
<p>
</p>
<div class="dropdown">
    <div class="dropbtn">
      <a>dropdown!</a>
    </div>
    <div class="dropdown-content">
        <a class="firstA" href="#">Item1</a>
        <a href="#">Item2</a>
    </div>
</div>

Answer 1

您没有定义任何 z-index...

查看您的 fiddle 更新：https://jsfiddle.net/Bes7weB/tnt7dxq2/1/

这是你想要的吗？
我只添加了 z-index:2; 到你的 CSS .dropdown-content {.

HTML CSS z-index

HTML CSS z-index

html

css

z-index