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

我认为这是浏览器控制的项目，它总是出现在最顶层。尝试使用像selec2这样的插件或者选择用于完全控制的自定义下拉列表

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

1 个答案: