Отображение div поверх другого без использования z-индекса

Question

Я создал пользовательские выпадающие меню, которые имеют один <div>, удерживающий текущее значение и действующее как поле <select>, а другое под ним, которое отображается, когда нажимается верхняя часть , удерживая все значения <option>.

Для этого требуется нижняя часть <div>, чтобы она была расположена чуть ниже верхней (странные закругленные углы и т. Д.), Поэтому я использовал z-index для достижения этого. Все работает до тех пор, пока у меня нет двух выпадающих меню, расположенных близко друг к другу. Если вы нажмете верхний, появится раскрывающийся список опций, но он будет ниже второго выпадающего меню, что крайне нежелательно. Вот упрощенная версия в jsfiddle: jsFiddle

Как вы можете видеть, первое выпадающее меню прекрасно, а второе скрыто под третьим. Любые идеи, как я могу достичь этого, так и второе меню работает? Может быть, без использования z-index?

Answer 1

во-первых, завернуть каждое меню в элементе. Я использовал div.container.

Поскольку только одно меню будет открыто в то время, просто изменив z-index из .major и .minor элементов в каждом контейнере (при наведении курсора мыши в моем примере) работает правильно:

.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

Я не уверен на 100%, что вы имеете в виду, но если я не ошибаюсь, решение должно состоять в том, чтобы обернуть разделители .major и .minor, чтобы они не перекрывали друг друга, например:

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

Смотрите мою вилку вашего JSFiddle: https://jsfiddle.net/jk1dn4yx/