JSFiddle - React, Tailwind, and code Playground

by Alan Guerrero

HTML

<ul class="test">
  <li>
    <a href="#">Title</a>
  </li>
  <li>
    <ul>
      <li>
        <a href="#">Some link</a>
      </li>
      <li>
        <a href="#">Some link</a>
      </li>
      <li>
        <a href="#">Some link</a>
      </li>
      <li>
        <a href="#">Some link</a>
      </li>
    </ul>
  </li>
</ul>

JavaScript

$(document).ready(function() {
  dropdownMenu = $(".test li:last-child");
  dropdownMenu.hide();
  $(".test").focusin(function() {
    if (dropdownMenu.is(":hidden")) {
      dropdownMenu.show();
    }
  });
  /*
  $(".test").focusout(function() {
    if (dropdownMenu.is(":visible")) {
      dropdownMenu.hide();
    }
  });
  */
});