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

Question

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

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

如何隐藏打开的下拉菜单？ (不使用 JavaScript)

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

我做了一个 fiddle 来说明问题: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

我认为它是浏览器控制的元素，总是出现在顶部。尝试使用一些插件，例如 selec2 或选择您可以完全控制的自定义下拉列表