JSFiddle - React, Tailwind, and code Playground

by Alejandro

HTML

<div class="dropdown">
    <div class="btn">Button</div>
    <ul>
        <li><a href="">Link 1</a></li>
        <li><a href="">Link 2</a></li>
        <li><a href="">Link 3</a></li>
        <li><a href="">Link 4</a></li>
        <li><a href="">Link 5</a></li>
    </ul>
</div>

CSS

.dropdown {
    width: 100px;
}
.btn {
    background-color: blue;
    padding: 5px 10px;
    color: #fff;
}
.btn:hover {
    cursor: pointer;
}
ul, li {
    padding: 0;
    margin: 0;
}
ul {
    display: none;
}
a {
    background-color: #c0c0c0;
    color: blue;
    text-decoration: none;
    padding: 5px 10px;
    display: block;
}
a:hover {
    background-color: #aaa;
}

JavaScript

// Hoverflow plugin
// http://www.2meter3.de/code/hoverFlow/index.html
(function($){$.fn.hoverFlow=function(c,d,e,f,g){if($.inArray(c,['mouseover','mouseenter','mouseout','mouseleave'])==-1){return this}var h=typeof e==='object'?e:{complete:g||!g&&f||$.isFunction(e)&&e,duration:e,easing:g&&f||f&&!$.isFunction(f)&&f};h.queue=false;var i=h.complete;h.complete=function(){$(this).dequeue();if($.isFunction(i)){i.call(this)}};return this.each(function(){var b=$(this);if(c=='mouseover'||c=='mouseenter'){b.data('jQuery.hoverFlow',true)}else{b.removeData('jQuery.hoverFlow')}b.queue(function(){var a=(c=='mouseover'||c=='mouseenter')?b.data('jQuery.hoverFlow')!==undefined:b.data('jQuery.hoverFlow')===undefined;if(a){b.animate(d,h)}else{b.queue([])}})})}})(jQuery);

// Below is my script

// Hover
$.fn.slideFadeToggle  = function(e) {
    return this.hoverFlow(e.type, {opacity: 'toggle', height: 'toggle'}, 'fast', 'linear', function() {});
};
var hoverExpand = function (e) {
    $(this).find('ul').slideFadeToggle(e);
}
$('.dropdown').hover(hoverExpand);
// Click
$('div').click(function() {
    if ($(this).find('ul').is(':visible')) {
        $(this).find('ul').hide();
    } else {
        $(this).find('ul').show();
    }
});