HTML CSS z 索引

Question

我有两个下拉列表，如下例所示:

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

https://jsfiddle.net/tnt7dxq2/

<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 {。