JSFiddle - React, Tailwind, and code Playground

HTML

<div  >
 open the droddown and then, without closing the dropdown, hover the red "menu"
</div>
<div id="topmenu">
  
</div>
<br>
<div class="dropdown">
<select>
<option>1</option>
<option>1</option>
<option>1</option>
</select>

</div>

<br><br><br><br>
This is how I want it to look like
<div class="expected"></div>

CSS

#topmenu {
  position:absolute;
  top: 30px;
  min-height:10px;
  width: 15px;
  background: red;
  z-index: 50;
  
}

select {
  z-index: 10;
  position: relative;
}

.dropdown {
  z-index: 10;
  position: relative;
}

.expected {
  
  min-height: 100px;
  width: 50px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAABhCAIAAAD0hQ6BAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAG7SURBVGhD7di9SgNBFIbhxOyKf6UWqSy0UAsFSWwEN+A1WAQUrLSwFyQpgo02ghdgsLTxGrSxFQtDbLTeC1CDZhPikBzEpNn5socwyPc0noMIL5NdGZJ+/2yknDQmP93DMhzLcIPv5kuYroeeLKpWsq3lbEcWC31lJiu/OCmLhYOzO5ni+L7vza3tbvr2cX1lt4/e/ta4LDY6wBkcXTzk8hs7ubbscUb3nEVRJJMdvpu4/15WKBTSf5hVfpGATlmlUpGpa2AdjtqZBUHQm83g0JkZv+ekcmCGWlnv2LQOzFArM8xpaR2YoVlmTkvrwAzNMl0sw7Gse3mUyU6iO+3h+b1McUxWZnZ1+DutMTM9JZOF0tWzTHHaregtbFwfr8tuIVHZ/CVw2y5OPJX3lmSxMLrnLONhzxnfTRzLcCzDsQzHMhzLcCzDuVuW6OYIfU9bqtZOiguyWOCniWMZjmU4luFYhmMZjmU4luFYhmMZjmU4luFYhmMZjmU4luFGV9ZqfstkJ9F3juVqTaY4UfOr/hrenG7LbiFR2Uf/3+ric4ZjGY5lOHfLBv+fuYOfJo5lOJbhWIZztSyV+gFRjXA9EcwK+gAAAABJRU5ErkJggg==')
}
img {margin-top:10px}

JavaScript

document.getElementById('topmenu').addEventListener("mouseover", function()
{document.getElementById('topmenu').style.minHeight = "80px";})

document.getElementById('topmenu').addEventListener("mouseleave", function()
{document.getElementById('topmenu').style.minHeight = "10px";})