JSFiddle - React, Tailwind, and code Playground

by zainshaikh

HTML

<table class="bg" border="0" style="WIDTH: 960px; background-color: #fff; BORDER-COLLAPSE: collapse; HEIGHT: 60px" cellspacing="0" cellpadding="0"><tr><td style=" background-image: url('http://vidizmo.com/ChannelImgaes/ej4/headerbg0.png'); background-repeat: no-repeat; width: 602px; height: 60px"></td><td style="text-align:left; background-image: url('http://vidizmo.com/ChannelImgaes/ej4/headerbg1.png'); background-repeat: no-repeat;  width: 203px; height: 60px">

<ul id="nav">
<li style="padding-left: 60px"><a style="font-size: 11pt" href="#">Packages</a> <ul class="ArrowList">            <li><a href="http://ej4.vidizmo.com/ViewDetails.aspx?otid=toOhJc%2feMhQ%3d&oid=IRWDmnlqXUg%3d&tsd=Q56mTZZ%2bNlM%3d&oname=ZJjwXselo2mfZtHn%2bcdWrw%3d%3d">Administrative</a></li><li><a href="http://ej4.vidizmo.com/ViewDetails.aspx?otid=toOhJc%2feMhQ%3d&oid=xjsV%2bbbOnY0%3d&tsd=Q56mTZZ%2bNlM%3d&oname=wiicwKi5NKYb3G72MxeOUhQGmzaHFOW3">Key Account Selling</a></li><li>                <a href="http://ej4.vidizmo.com/ViewDetails.aspx?otid=toOhJc%2feMhQ%3d&oid=rfeMf1VJn0k%3d&tsd=Q56mTZZ%2bNlM%3d&oname=0%2ffrmQgJdtWa209%2fAXarrw%3d%3d">Leadership</a></li><li><a href="http://ej4.vidizmo.com/ViewDetails.aspx?otid=toOhJc%2feMhQ%3d&oid=XqxzgnjldTE%3d&tsd=Q56mTZZ%2bNlM%3d&oname=drgHQG2o832gyn%2fRE%2fmiJw%3d%3d">Operations</a></li><li><a href="http://ej4.vidizmo.com/ViewDetails.aspx?otid=toOhJc%2feMhQ%3d&oid=a7QQk%2bY81kE%3d&tsd=Q56mTZZ%2bNlM%3d&oname=z9xaqv8vrHCVQE3scbA3Ojf6kgljzSbbEp4ySgKnVcE%3d">Retail Excellence Training</a></li><li><a href="http://ej4.vidizmo.com/ViewDetails.aspx?otid=toOhJc%2feMhQ%3d&oid=ZglI%2fWkE6ao%3d&tsd=Q56mTZZ%2bNlM%3d&oname=Yj%2bNjHlXd2U%3d">Safety</a></li><li><a href="http://ej4.vidizmo.com/ViewDetails.aspx?otid=toOhJc%2feMhQ%3d&oid=GnJFSct%2f4oI%3d&tsd=Q56mTZZ%2bNlM%3d&oname=UU3NqLBDQl7OKOg31UkU%2bw%3d%3d">Selling Skills</a></li><li><a...

CSS

#nav, #nav ul { /* all lists */ padding: 0; margin: 0; list-style: none; font-size: 11pt; line-height: 1.7;}
#nav a { display: block; width: 8.5em;} #nav li { /* all list items */ float: left; width: 7.5em; /* width needed or else Opera goes nuts */}
#nav li ul { /* second-level lists */ position: absolute; background: #f7f7f7; border: 1px #c8c3c3 solid; width: 10em; padding: 6px; left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */}
#nav li:hover ul, #nav li.sfhover ul { /* lists nested under hovered list items */ left: auto;}
#content { clear: left; color: #ccc;}
.bg { background-image: url('http://vidizmo.com/ChannelImgaes/ej4/bg.png'); background-repeat: repeat-x; }

JavaScript

var sfHover = function() { var sfEls = document.getElementById("nav").getElementsByTagName("LI");
 for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() { this.className+=" sfhover"; };
 sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" sfhover\\b"), ""); };
}};
if (window.attachEvent) window.attachEvent("onload", sfHover);