JSFiddle - React, Tailwind, and code Playground

by CSS_Apprentice

HTML

<ul class="main-section-nav nav navbar-nav">
 <li class="dropdown">
  <a>item</a>    
  <ul>
    <li> item </li>
    <li> item </li>
    <li> item </li>
  </ul>
 </li>
 <li class="dropdown active">
  <a>item</a>    
  <ul>
    <li> item </li>
    <li> item </li>
    <li> item </li>
  </ul>
 </li>
 <li class="dropdown">
  <a>item</a>    
  <ul>
    <li> item </li>
    <li> item </li>
    <li> item </li>
  </ul>
 </li>
 <li class="dropdown">
  <a>item</a>    
  <ul>
    <li> item </li>
    <li> item </li>
    <li> item </li>
  </ul>
 </li>
</ul>

CSS

.dropdown > ul {display: none}
.dropdown.open > ul {display: block}

JavaScript

$('.main-section-nav > li').mouseleave(function(){
      $('.active').addClass('open');
    });