JSFiddle - React, Tailwind, and code Playground

HTML

<div id="button1">Green one</div>
<ul id="list1">
    <li>Option 1.1</li>
    <li>Option 1.2</li>
    <li>Option 1.3</li>
</ul>

<br />

<div id="button2">Yellow one is longer</div>
<ul id="list2">
    <li>Option 2.1</li>
    <li>Option 2.2</li>
    <li>Option 2.3</li>
</ul>

CSS

#button1,
#button2 {padding: 5px; display: inline-block; cursor: pointer;}

#button1 {position: relative; background: green;}
#button2 {position: relative; background: yellow;}

#list1,
#list2 {list-style-type: none; margin: 0px; padding: 0px; border: 1px solid black; display: none; position: absolute;}
#list1 li,
#list2 li {padding: 5px;}

#list1 {background: #99CC00;}
#list2 {background: #FFFF99;}

JavaScript

var zindex = 100;

$('div:has(+ul)').click(function () {
    var slider = $(this).find("+ul");
    var btnAndSlider = slider.add(this);
    var opening = !slider.is(":visible");
    slider.slideToggle(function(){
        if (!$(this).is(":visible")){
            btnAndSlider.css("z-index", zindex-2);
        }
    });
    if (opening) {
        btnAndSlider.css("z-index", ++zindex);
    }
});