JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Fruit</a>
    <ul>
         <li><a href="#">Apple</a></li>
         <li><a href="#">Banana</a></li>
         <li><a href="#">Orange</a></li>
    </ul>
</li>
<li><a href="#"> Veggie</a>
    <ul>
         <li><a href="#">Broccoli</a></li>
         <li><a href="#">Tomato</a></li>
         <li><a href="#">Carrot</a></li>
    </ul>
</li>                                     
    </ul>
</div>

CSS

#menu{
    width:100%;
    background:#318598;
    text-align:center;
    z-index:0;
}

#menu > li{
    display:inline-block;
    position:relative;
    line-height:35px;
    list-style-type: none;
}

#menu li a{
    display:block;
    text-decoration:none;
    padding:0px 10px;
    color:#fff;
    text-align:center;

}
/* Dropdown Event Properties */
#menu li ul{
   position:absolute;
   top: 35px;
   width:auto;
   background-color:rgba(0,0,0,0.5);
   z-index:1;
   list-style-type: none;
   padding-right: 40px;
}

#menu li ul li ul{
    top:0;
    left:150px;               
}

#menu li ul li a:hover{
   background:rgba(255,255,255,0.5);
}

#menu li ul{
    display: none;
    
}
#menu li:hover > ul{
    display:block;
    
}