How to hide dropdown behind top menu?

Question

z-index doesn't seem to work for an open dropdown.

When a user clicks a dropdown first and then hovers top menu (which is a div with position absolute and high z-index), the open dropdown still shows on top of the top menu. I want it to hide beneath the menu.

How can I hide the open dropdown? (without using javascript)

EDIT: Not possible, see How to select options overlapping an absolute positioned DIV?

I have made a fiddle that should illustrate the problem: https://jsfiddle.net/9m84dv6h/2/

Here's the code (when the top menu is open):

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

Not possible, refer: http://stackoverflow.com/questions/8188353/css-select-options-overlapping-absolute-positioned-div — Praveen, Jul 01 '16 at 10:43
ok. I, I was looking for a similar question but didn't find it. I will mark my question as a duplicate. Thanks! — Gustaf Holmqvist, Jul 01 '16 at 10:51

score 0 · Answer 1 · answered Jul 01 '16 at 10:34

0

I think it's browser controlled item that will always appear on top. Try using some plugin like selec2 or chosen for custom dropdown that you can fully control

answered Jul 01 '16 at 10:34

Justinas

41,402
5
66
96

How to hide dropdown behind top menu?

1 Answers1