Displaying a div on top of another without using z-index - html

Question

I've created custom drop down menus that have one <div> holding the current value and acting as a <select> field and another below it that gets displayed when the top one is clicked, holding all the <option> values.
The design requires the bottom <div> to position slightly below the upper one (weird rounded corners, etc) so I used z-index to achieve that. It all works until the moment I have two drop down menus close to each other. If you click the upper one the drop down option list is displayed but it goes below the second drop down menu as well which is highly undesirable. Here's simplified version in a jsfiddle:
jsFiddle
As you can see, the first drop down menu is fine but the second one is hidden below the third one. Any ideas how can I achieve this so the second menu works as well? May be without using z-index somehow?

Answer 1

First, wrap each menu in an element. I used a div.container.
Since only one menu is going to be open at a time, simply changing the z-index of the .major and .minor elements in each container (on hover in my example) works correctly:
.major {
position: relative;
width: 100px;
background-color: red;
z-index: 1;
}
.minor {
position: absolute;
width: 150px;
background-color: blue;
padding-top: 10px;
margin-top: -10px;
z-index: 0;
display: none;
}
.container:hover .major {
z-index: 5;
}
.container:hover .minor {
display: block;
z-index: 4;
}
.moveup {
margin-top: -25px;
}
<div class="container">
<div class="major">
First one fine
</div>
<div class="minor">
Option part goes here Option part goes here Option part goes here
</div>
</div>
<br />
<br />
<br />
<br />
<div class="container">
<div class="major">
Second menu
</div>
<div class="minor">
Option part goes here Option part goes here Option part goes here
</div>
</div>
<div class="container">
<div class="major">
Third menu
</div>
<div class="minor">
Option part goes here Option part goes here Option part goes here
</div>
</div>

Answer 2

I'm not 100% sure what you mean, but if I'm not wrong, the solution should be to wrap the .major and .minor divs so they don't overlap each other, like so:
<div class="dropdown">
<div class="major">
First one fine
</div>
<div class="minor">
Option part goes here
Option part goes here
Option part goes here
</div>
</div>
See my fork of your JSFiddle: https://jsfiddle.net/jk1dn4yx/