JSFiddle - React, Tailwind, and code Playground

by Kyle

HTML

<link rel="stylesheet" href="http://users.tpg.com.au/j_birch/plugins/superfish/css/superfish.css">
<script src="http://users.tpg.com.au/j_birch/plugins/superfish/js/superfish.js"></script>
<div class="page">
    <div id="header">
<div id="menucontainer">     
    <ul class="sf-menu">
            <li class="current">
                <a href="#a">menu item</a>
                <ul>
                    <li>
                        <a href="#aa">menu item that is quite long</a>
                    </li>
                    <li class="current">
                        <a href="#ab">menu item</a>
                        <ul>
                            <li class="current"><a href="#">menu item</a></li>
                            <li><a href="#aba">menu item</a></li>
                            <li><a href="#abb">menu item</a></li>
                            <li><a href="#abc">menu item</a></li>
                            <li><a href="#abd">menu item</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">menu item</a>
                        <ul>
                            <li><a href="#">menu item</a></li>
                            <li><a href="#">menu item</a></li>
                            <li><a href="#">menu item</a></li>
                            <li><a href="#">menu item</a></li>
                            <li><a href="#">menu item</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">menu item</a>
                        <ul>
                            <li><a href="#">menu item</a></li>
                            <li><a href="#">menu item</a></li>
                            <li><a href="#">menu item</a></li>
                            <li><a href="#">menu item</a></li>
                            <li><a href="#">menu item</a></li>
                        </ul>
                    </li>
                </ul>
...

CSS

body {
    font: Tahoma, Verdana, Arial, Helvetica;
    font-family:Trebuchet MS;
    margin: 0;
    padding: 0;    
    color: #000;
    background-color:#e2f2fb;
    font-size: 14px;
}

#menucontainer {
    margin-top: 103px;
    display:inline-block;
    border: solid 1px #000;
}

header, #header 
{       
    margin-top:0px;
    position: relative;    
    margin-bottom: 0px;
    padding: 0;
    border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border:2px solid #000;
    text-align: center;
}

.page {
    margin-left: auto;
    margin-right: auto;
    min-width:760px;    
    max-width:950px;
}

.clear
{
    clear: both;
}

JavaScript

jQuery(function(){
            jQuery('ul.sf-menu').superfish();
        });