0

When creating some clickable dropdowns, I noticed the dropdown menu will hide behind any clickable dropdown buttons if they overlap. Here is an example

W3.CSS Clickable Dropdown

How can I fix this? Here is the code used to create the dropdown. 

<div class="w3-container">
  <div class="w3-dropdown-click">
    <button onclick="myFunction()" class="w3-btn">Click Me!</button>
    <div id="Demo" class="w3-dropdown-content w3-border">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
    </div>
  </div>
</div>

I also made a fiddle, but it doesn't seem to be working: https://jsfiddle.net/n2fole00/99d8d7pj/

BTW, would this be considered a bug?

Thanks.

user126440
  • 391
  • 1
  • 2
  • 19

1 Answers1

1

Based on Tony Hensler's comment, it was the z-index. 

<div id="<?php echo $course->course_id; ?>" class="w3-dropdown-content w3-border" style="right:0; z-index:1;">

I just added z-index:1 to the w3-dropdown-content div as an inline style for the fix.

Thanks Tony.

user126440
  • 391
  • 1
  • 2
  • 19