JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <ul>
        <li>
            <a href="#">Item 1</a>
        </li>
        <li class="dropdown">
            Item 2
            <ul>
                <li>
                    <a href="#">Item 4</a>
                </li>
                <li>
                    <a href="#">Item 5</a>
                </li>
            </ul>            
        </li>
        <li>
            <a href="#">Item 3</a>
        </li>
    </ul>
</div>

CSS

ul{
 list-style-type: none;   
}

div > ul > li{
 float: left;  
 margin-right: 30px;    
}

div > ul > li > ul {
  position: absolute;
  height: 0px;
  opacity: 0;    
}

div > ul > li.hover > ul {
  height: 30px;
  opacity: 1;    
}

JavaScript

$(document).ready(function(){
    $('li.dropdown').click(function(){
            $(this).toggleClass('hover');
    });
});