JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<script src="http://pixythemes.com/wp-content/themes/thematic/library/scripts/superfish.js?ver=1.4.8"></script>
<div class="menu"><ul id="menu-header-menu" class="nav sf-menu sf-js-enabled"><li id="menu-item-89" class="menu-item menu-item-type-taxonomy menu-item-object-product_cat menu-item-has-children menu-item-89"><a href="http://pixythemes.com/themes/socialengine-php-v4-themes/">SocialEngine PHP v4 Themes</a>
<ul class="sub-menu" style="float: none; width: 12em; visibility: hidden; display: none;">
	<li id="menu-item-370" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-370" style="white-space: normal; float: left; width: 100%;"><a href="http://pixythemes.com/shop/socialengine-php-v4-themes/zephyr-theme/" style="float: none; width: auto;">Zephyr Theme</a></li>
	<li id="menu-item-320" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-320" style="white-space: normal; float: left; width: 100%;"><a href="http://pixythemes.com/shop/socialengine-php-v4-themes/applebuzz-theme/" style="float: none; width: auto;">AppleBuzz Theme</a></li>
	<li id="menu-item-322" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-322" style="white-space: normal; float: left; width: 100%;"><a href="http://pixythemes.com/shop/socialengine-php-v4-themes/affinity-theme/" style="float: none; width: auto;">Affinity Theme</a></li>
	<li id="menu-item-323" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-323" style="white-space: normal; float: left; width: 100%;"><a href="http://pixythemes.com/shop/socialengine-php-v4-themes/adrenaline-theme/" style="float: none; width: auto;">Adrenaline Theme</a></li>
	<li id="menu-item-321" class="menu-item menu-item-type-post_type menu-item-object-product menu-item-321" style="white-space: normal; float: left; width: 100%;"><a href="http://pixythemes.com/shop/socialengine-php-v4-themes/thebook-theme/" style="float: none; width: auto;">Thebook...

CSS

.sf-menu {
	float:left;
	margin-left:1px;
}
.sf-menu a {
  	border-color:#CCCCCC;
    border-style:solid;
    border-width:1px;
	padding:9px 13px;
	text-decoration:none;
	margin-left:-1px;
}
.ie7 .sf-menu a {
	width:100%;
}
.sf-menu .current-menu-item a,
.sf-menu .current-menu-parent a,
.sf-menu .current-menu-ancestor a,
.sf-menu .current-post-ancestor a,
.sf-menu .current_page_item a,
.sf-menu .current_page_ancestor a,
.sf-menu .current_page_parent a {
    border-bottom-color:#fff;
}
.sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
	color:#666;
}
.sf-menu li {
	background:#fff;
}
.sf-menu li li {
	background:#fff;
}
.sf-menu li li li {
	background:#9AAEDB;
}
.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
    background:#fafafa;
	outline: 0;
    border-bottom-color:#ccc;
}
.sf-menu ul {
    border-bottom:1px solid #ccc;
}
.sf-menu li:hover ul,
.sf-menu li.sfHover ul {
	top:32px; /* overriding essential styles */
}
.sf-menu ul ul {
    margin-top:0;
}
.sf-menu ul a {
    background:#fafafa;
	border-bottom:none;
}
.sf-menu ul a:hover {
    color: #FF4B33;
}

JavaScript

jQuery.noConflict();
jQuery(document).ready(function(){ 
    jQuery("ul.sf-menu").supersubs({ 
        minWidth:    12,                                // minimum width of sub-menus in em units 
        maxWidth:    27,                                // maximum width of sub-menus in em units 
        extraWidth:  1                                  // extra width can ensure lines don't sometimes turn over 
                                                        // due to slight rounding differences and font-family 
    }).superfish({ 
        delay:       400,                               // delay on mouseout 
        animation:   {opacity:'show',height:'show'},    // fade-in and slide-down animation 
        speed:       'fast',                            // faster animation speed 
        autoArrows:  false,                             // disable generation of arrow mark-up 
        dropShadows: false                              // disable drop shadows 
    }); 
});