JSFiddle - React, Tailwind, and code Playground
HTML
<a class="clicktodrop" href="">+</a>
<ul>
<li>menu item 1</li>
<li class="has-dropdown">menu item 2</li>
<ul class="dropdown">
<li>sub menu</li>
</ul>
<li>menu item 3</li>
<li>menu item 4</li>
<li class="has-dropdown">menu item 5</li>
<ul class="dropdown">
<li>sub menu 2</li>
</ul>
<li>menu item 6</li>
</ul>
CSS
.dropdown {
display:none;
}
JavaScript
$(function() {
$(".clicktodrop").hover(function() {
$(this).next(".dropdown").slideDown(200);
}, function() {
$(this).next(".dropdown").slideUp(200);
});
});