JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cherne.net/brian/resources/jquery.hoverIntent.js"></script>
<script src="http://users.tpg.com.au/j_birch/plugins/superfish/js/superfish.js"></script>
<div style="width:200px;">
<ul style="z-index:100;" id="yak_css_menu_1" class="yak_css_menu"><li style="z-index:102;"><a class="blockcontent" href="/YAK2/components.php?component_name=webportal&amp;lang=english&amp;action=show_news&amp;news_key=!admin!_small_ads" title="Small Ads">Small Ads</a></li><li style="z-index:102;"><a class="blockcontent" href="/YAK2/components.php?component_name=webportal&amp;lang=english&amp;action=show_news&amp;news_key=!admin!_wizard" title="Wizard">Wizard</a></li><li>&nbsp;</li><li style="z-index:102;"><a class="blockcontent" href="/YAK2/components.php?component_name=webportal&amp;lang=english&amp;action=show_news&amp;news_key=!admin!_news_dynamic" title="News published on the site...">News</a></li><li style="z-index:102;" name="css_menu_has_submenu"><a class="blockcontent" href="/YAK2/components.php?component_name=webportal&amp;lang=english&amp;action=show_news&amp;news_key=!admin!_news_static" title="Web Site's Pages"><img alt="" align="right" style="position:absolute; right:3px;" border="0" vspace="4" width="8" height="7" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAMAAAACh/xsAAAABGdBTUEAALGPC/xhBQAAAEJQTFRFAEgAUVFRWVlZW1tbXFxcXV1dYWFhY2NjZGRkZmZmZ2dnaGhoaWlpampqbGxsbm5ub29vcHBwc3Nzf39/hoaGUFBQSxluAAAAAAF0Uk5TAEDm2GYAAAABYktHRACIBR1IAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH1QwBDQEvSXkyEwAAADRJREFUCNdjYAACbgYo4GUCEgJsjCL8TFwMDJwcXKI8gkx8DJxs3MIsrHwQNczsUMVCQAwAIx4BHgezbBoAAAAASUVORK5CYII=">Pages</a><ul style="z-index:100;"><li style="z-index:102;"><a class="blockcontent yak_css_menu_last_subitem" href="/YAK2/components.php?component_name=webportal&amp;lang=english&amp;action=show_news&amp;news_key=!admin!_news_table_of_contents" title="Table of Contents">Table of Contents</a></li></ul></li><li>&nbsp;</li><li style="z-index:102;"...

CSS

ul#yak_css_menu_1 li ul{display:none;}
ul#yak_css_menu_1 li:hover>ul{display:block;}
ul#yak_css_menu_1 {float:left; list-style:none; width:100%; margin:0px; padding:0px;}
ul#yak_css_menu_1 ul{ list-style:none; margin:0px; padding:0px; background:#ffffcc; width:150px; border:1px solid #00008B;}
ul#yak_css_menu_1 ul{ position:absolute; top:0px; right:-150px;}
ul#yak_css_menu_1 li{ position:relative; margin:0px; padding:0px; border:0px;}
ul#yak_css_menu_1    a{display:block; width:100%;}
ul#yak_css_menu_1    a:hover{ color:#ff0000; background:#ccffcc;}
ul#yak_css_menu_1 ul a{display:block; width:100%; color:#0000ff; text-decoration:none;}
ul#yak_css_menu_1 ul a:hover{ color:#ff0000; background:#ccffcc;}
ul#yak_css_menu_1    a{ border-bottom:0px none  ;}
ul#yak_css_menu_1 ul a{ border-bottom:1px dashed #00008B ;}
ul#yak_css_menu_1    a.yak_css_menu_last_subitem{ border-bottom:0px;}

JavaScript

$(document).ready(function() {
    $('ul.yak_css_menu').superfish({
        delay:       700,
        animation:   {opacity:'show',height:'show'},
        speed:       'slow',
        autoArrows:  false
    });
});