如何隐藏顶部菜单后面的下拉菜单？

Question

z-index 似乎不适用于打开的下拉菜单。

当用户先点击下拉菜单然后将鼠标悬停在顶部菜单（这是一个绝对位置和高 z-index 的 div）时，打开的下拉菜单仍然显示在顶部菜单的顶部。我希望它隐藏在菜单下方。

如何隐藏打开的下拉菜单？ （不使用javascript）

编辑：不可能，请参阅How to select options overlapping an absolute positioned DIV?

我做了一个可以说明问题的小提琴：https://jsfiddle.net/9m84dv6h/2/

这是代码（当顶部菜单打开时）：

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

我认为它是始终显示在顶部的浏览器控制项。尝试使用一些插件，如 select2 或选择您可以完全控制的自定义下拉列表