JSFiddle - React, Tailwind, and code Playground

by salitrapraveen

HTML

<div id="categories-menu" class="hover-menu">
   <h2>Categories</h2>
   <ul class="actions no-style" style="display: none">
     <li><a href="">Add</a></li>
     <li><a href="">Edit</a></li>
     <li><a href="">Delete</a></li>
   </ul>
 </div>

JavaScript

$(function() {
 
   function show() {
     var menu = $(this);
     menu.children(".actions").slideDown();
   }
  
   function hide() { 
     var menu = $(this);
     menu.children(".actions").slideUp();
   }
 
   $(".hover-menu").hover({
     sensitivity: 1, // number = sensitivity threshold (must be 1 or higher)
     interval: 50,   // number = milliseconds for onMouseOver polling interval
     over: show,     // function = onMouseOver callback (required)
     timeout: 300,   // number = milliseconds delay before onMouseOut
     out: hide       // function = onMouseOut callback (required)
   });
  
 });