Wie Dropdown hinter Top-Menü verstecken?

Question

Z-Index scheint nicht für eine offene Dropdown-Liste zu funktionieren.

Wenn ein Benutzer zuerst auf ein Dropdown-Menü klickt und dann das oberste Menü anzeigt (das ist ein Div mit absolutem und hohem Z-Index), wird das geöffnete Dropdown-Menü immer noch im oberen Menü angezeigt. Ich möchte, dass es sich unter dem Menü versteckt.

Wie kann ich das geöffnete Dropdown verbergen? (Ohne Javascript zu verwenden)

EDIT: Nicht möglich, siehe How to select options overlapping an absolute positioned DIV?

ich eine Geige gemacht haben, die das Problem veranschaulichen soll: https://jsfiddle.net/9m84dv6h/2/

Hier ist der Code (wenn das obere Menü geöffnet ist):

HTML:

<div id="topmenu"></div> 
<br> 
<div class="dropdown"> 
    <select> 
     <option>1</option> 
     <option>1</option> 
     <option>1</option> 
    </select> 
</div> 

CSS

#topmenu { 
    position:absolute; 
    min-height:80px; 
    width: 15px; 
    background: red; 
    z-index: 50; 
} 

select { 
    z-index: 10; 
    position: relative; 
} 

.dropdown { 
    z-index: 10; 
    position: relative; 
} 

Answer 1

Ich denke, es ist Browser-gesteuertes Element, das immer an der Spitze erscheint. Verwenden Sie ein Plugin wie selec2 oder wählen Sie ein benutzerdefiniertes Dropdownmenü, das Sie vollständig steuern können