JSFiddle - React, Tailwind, and code Playground

by brianflanagan

HTML

<ul id="mylinksdd" class="mylinksdd">
    <li>
        <span style="font-weight:bold; cursor:default">Quick Links</span>
        <ul>
            <li><a href="">One</a></li>
            <li><a href="">Two</a></li>
            <li><a href="">Three</a></li>
        </ul>
    </li>
</ul>

CSS

/* mylinksdd */
.mylinksdd, 
.mylinksdd ul               {list-style:none; margin:0; padding:0;}
.mylinksdd                  {z-index:100; position:relative;}
.mylinksdd li               {float:left; margin:0; padding:0; position:relative;}
.mylinksdd li a             {color:#1a508e; display:block; padding:0 0px;}
.mylinksdd ul               {background:#eee; border:1px solid black; border-top:6px solid #3c1e4c; list-style:none; margin:0; width:75px; position:absolute; top:-999em; left:0px; right:0px; padding:5px; color:#1a508e;}
.mylinksdd li:hover ul,
.mylinksdd li.sfHover ul    {top:16px;}
.mylinksdd ul li            {color:#1a508e; border:0; float:none;}

JavaScript

$(document).ready(function() {
    /*
    $("#mylinksdd li").hover(function() {
        $("ul", this).fadeIn("fast");
    });
    if (document.all) {
        $("#mylinksdd li").hoverClass("sfHover");
    }
    */
});
$.fn.hoverClass = function(c) {
    return this.each(function() {
        $(this).click(function() {
            $(this).addClass(c);
        });
        
        $(this).mouseout(function() {
            $(this).removeClass(c);
        });
    });
};