JSFiddle - React, Tailwind, and code Playground

by ponyspy

HTML

<div class="outer">
<div class="drop_menu" style="z-index: 2;">
  <div class="drop_title">меню</div>
  <div class="drop_inner">
    <div class="drop_item">раз</div>
    <div class="drop_item">дав</div>
    <div class="drop_item">супер три</div>
    <div class="drop_item">ой как четыре</div>    
  </div>
</div>

<div class="drop_menu" style="z-index: 1;">
  <div class="drop_title">меню супер</div>
  <div class="drop_inner">
    <div class="drop_item">раз</div>
    <div class="drop_item">дав</div>
    <div class="drop_item">супер три</div>
    <div class="drop_item">ой как четыре</div>    
  </div>
</div>  
</div>

CSS

.drop_menu {
  position: relative;
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  margin-right: 5px;
}

.drop_menu:hover .drop_inner {
  display: block;
}

.drop_inner {
  position: absolute;
  padding-top: 15px;
  padding-left: 5px;
  padding-right: 5px;
  margin-left: -5px;
  background-color: white;
  box-sizing: border-box;
  top: 0;
  left: 0;
  vertical-align: top;
  display: none;
  border: 1px dotted black;
}

.drop_title {
  position: relative;
  cursor: default;
  z-index: 999;
}

.drop_item {
  cursor: pointer;
}

.drop_item:hover {
  color: red;
}