JSFiddle - React, Tailwind, and code Playground

by joydesigner

HTML

<body>
    <!-- Display Main Menu !-->
    <nav class="cf">
        <nav class="cf">
            <!-- menu nav -->
            <ul class="topmenu">
                <!-- Home -->
                <li class="topmenu"><a href="/index.php">Home</a>

                </li>
                <!-- Canada Equity ETF -->
                <li class="topmenu"><a href="/index.php#eqCanBroadMarket">Canada Equity <img src="/etf-images/down-arrow.jpg"></a>

                    <ul class="submenu">
                        <li><a href="/index.php#eqCanBroadMarket">Broad Market</a>

                        </li>
                        <ul class="sub-submenu">
                            <li><a href="/index.php#eqCanSS"> +++Third level menu option #1</a>

                            </li>
                            <li><a href="/index.php#eqCanREITS">+++Third level menu option #2</a>

                            </li>
                            <li><a href="/index.php#eqCanMC">+++Third level menu option #3</a>

                            </li>
                        </ul>
                        <li><a href="/index.php#eqCanSS">Sector Specific</a>

                        </li>
                        <li><a href="/index.php#eqCanREITS">REITs (Real Estate Investment Trusts)</a>

                        </li>
                        <li><a href="/index.php#eqCanMC">Mid-Cap and/or Small-Cap</a>

                        </li>
                        <li><a href="/index.php#eqCanMinVol">Minimum Volatility</a>

                        </li>
                    </ul>
                </li>
                <!-- USA Equity ETF -->
                <li class="topmenu"><a href="/index.php#eqUSABroadMarket">USA Equity <img src="/etf-images/down-arrow.jpg"></a>

                    <ul class="submenu">
                        <li><a href="/index.php#eqUSABroadMarket">Broad Market</a>

                        </li>
                        <li><a href="/index.php#eqNASDAQ">NASDAQ</a>

            ...

CSS

@charset"utf-8";

/* CSS Document */
 html {
    background: #E6E3D4;
}
body {
    font: 100% Georgia, "Times New Roman", Times, serif;
    line-height: 1.2;
    /* */
}
/*micro-clearfix by Nicolas Gallagher http://nicolasgallagher.com/micro-clearfix-hack/*/
 .cf:before, .cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
 .cf {
    zoom:1;
}
/* START top level menu: topmenu - works great */

/* START top level menu: topmenu - works great */

/* START top level menu: topmenu - works great */
 ul.topmenu {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    background: #006da6;
    height: 2em;
    width: 100%;
    font: 100% Georgia, "Times New Roman", Times, serif;
    font-size: 0.95em;
}
li.topmenu {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    position: relative;
}
/* ul.sub-submenu defined - newly added as part of my third level menu mod */

/* ul.submenu defined - works great */

/* ul.topmenu defined - great great */
 ul.sub-submenu, ul.submenu, ul.topmenu li a {
    display: block;
    line-height: 1.8em;
    padding: 0 1em;
    color: white;
    text-decoration: none;
    z-index:3;
}
ul.topmenu li a:hover, ul.topmenu li:hover > a {
    background: #035c7c;
    height: 1.8em;
    padding-top: .3em;
    position: relative;
    top: -.3em;
    border-radius: .3em .3em 0 0;
    text-decoration: none;
}
ul.current, a:hover.current, ul.topmenu li:hover a.current {
    background: #AD9B7F;
    background: yellow;
    color: #eee;
    padding-top: .3em;
    border-radius: .3em .3em 0 0;
    position: relative;
    top: -.3em;
    border-bottom: .3em solid #917F63;
    cursor: default;
}
ul.topmenu li:hover ul {
    left: 0;
}
/* END top level menu: topmenu - works great */

/* END top level menu: topmenu - works great */

/* END top level menu: topmenu - works great */

/* START level 2: submenu ... works great */

/* START level 2: submenu ......

JavaScript

$('.submenu li a:first').hover(function(){
                            $('.sub-submenu').show();
                        },
                        function(){
                            $('.sub-submenu').hide();
                        });