JSFiddle - React, Tailwind, and code Playground
HTML
<nav>
<ul>
<li class="windows"><a href="#">Windows</a>
<ul>
<li><a href="#" class="tile">Tile</a></li>
<li><a href="#" class="closeAll">Close all</a></li>
</ul>
</li>
</ul>
</nav>
CSS
nav ul ul {
display: none;
}
nav ul:hover ul {
display: block;
}
JavaScript
$(document).ready(function(){
$("li a.tile").click(function(){
$("body").off("hover", "li.windows");
$("nav ul li ul").hide();
$("li.windows").hover(function(){
$("nav ul li ul").hide();
});
});
});