JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="mid-nav-top-ul">

     <li class="mid-nav-top-li"><a class="mid-nav-top-a">Trading News</a>
         <ul class="mid-nav-two-ul">
             <li class="mid-nav-two-li"><a class="mid-nav-two-a" href="#">Articles</a></li>
             <li class="mid-nav-two-li"><a class="mid-nav-two-a" href="#">Stocks</a></li>
             <li class="mid-nav-two-li"><a class="mid-nav-two-a" href="#">Forex</a></li>
             <li class="mid-nav-two-li"><a class="mid-nav-two-a" href="#">Commodities</a></li>
             <li class="mid-nav-two-li"><a class="mid-nav-two-a" href="#">Options</a></li>
         </ul>
     </li>
     
</ul>

CSS

.mid-nav-two-ul
{
    max-height: 0px;
    overflow: hidden;
    -webkit-transition: max-height 0.5s; 
    transition: max-height 0.5s;

}

.mid-nav-top-ul:hover .mid-nav-two-ul
{
    max-height: 1000px;
}