JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<div class="menu">
  Menu 
  <div class="dropdown_drawer">
    <div>
      Feature 
    </div>
    <div>
      Price 
    </div>    
  </div>
</div>
 

</body>
</html>

CSS

.menu {
  position: relative;
  border: 1px solid gray;
  display: inline-block;
  margin-left: 100px;
  margin-top: 50px;
  padding: 0.5em;
  cursor: pointer;
  width: 10em;
}

.dropdown_drawer {
  position: absolute;
  background: lightblue;
  width: 10em;
  /*display: none;*/ 
  visibility: hidden;
  opacity: 0;
  padding: 0.5em;
  transition: opacity 0.5s linear, visibility 0s linear 0.5s;
}

.menu:hover .dropdown_drawer {
    /* display: block; */
    opacity: 1;
    visibility: visible;
    /*菜单淡入的时候，这时候可见性需要立即触发，因此取消延迟。另外需要注意必须带时间单位*/
    transition-delay: 0s;
}