CODEWITHSUNDEEP
htmlcssz-index
bucurvlad
bucurvlad

Reputation: 119

HTML CSS z-index

I have two dropdowns as in following example:

Hover over first dropdown, and 2nd's text is still visible. Why?

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>

Upvotes: 1

Views: 39

Answers (1)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

You did not define any z-index...

See this update of your fiddle : https://jsfiddle.net/Bes7weB/tnt7dxq2/1/

Is this what you wanted ?
I only added z-index:2; to your CSS .dropdown-content {.

Upvotes: 1

Related Questions