Menüschaltfläche Dropdown-Text hinter anderen Menüschaltflächen.

Question

Beim Erstellen von einigen clickable dropdowns, habe ich festgestellt, dass das Dropdown-Menü hinter den anklickbaren Dropdown-Schaltflächen versteckt ist, wenn sie sich überlappen. Hier ist ein Beispiel

Wie kann ich dieses Problem beheben? Hier ist der Code zum Erstellen des Dropdown-Menüs.

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

Ich habe auch eine Geige, aber es scheint nicht zu funktionieren: https://jsfiddle.net/n2fole00/99d8d7pj/

BTW würde dies einen Fehler in Betracht gezogen werden?

Danke.

Answer 1

Basierend auf Tony Henslers Kommentar war es der Z-Index.

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

Habe ich nur noch z-index:1 zum w3-Drop-Down-Inhalt div als Inline-Stil für das Update.

Danke Tony.