JSFiddle - React, Tailwind, and code Playground

by ravimallya

HTML

<div id="td_25_96">DOC Dashboard</div>
       <div id="leftmenu"> 
          <a href="#" onclick="return false">test link</a>
           
                      <a href="#" onclick="return false">test link</a>
                      <a href="#" onclick="return false">test link</a>
       </div>

CSS

#td_25_96 {padding:10px 6px;background:yellow; width:120px;}
#leftmenu{display:none}
#leftmenu a {float:left;padding:10px 15px; background:#015;border:2px solid #036;color:white;text-decoration:none}

JavaScript

var nav = $('#leftmenu');
var tab = $('#td_25_96');
    tab.mouseover(function(){  
        if(nav.is(':not(":animated")')){   
        nav.show("fast");
        }
    }).mouseout(function(){
        if(nav.is(':hover')){
            nav.mouseleave(function(){
                if(tab.is(':hover')){
                    return;
                        }else{
                                     nav.hide('slow');
                        }
            });
        }else{
         nav.hide('slow');
        }
    });