JSFiddle - React, Tailwind, and code Playground

by Brandon

HTML

<link rel="stylesheet" type="text/css" href="https://navy.deps.mil/peoeis/sites/nen/_catalogs/theme/Themed/B581B6EA/corev4-8A0ABD2F.css?ctag=2" />
<div id="zz19_TopNavigationMenuV4" class="s4-tn">
    <div class="menu horizontal menu-horizontal">
        <ul class="root static">
            <li class="static selected"><a class="static selected menu-item" href="/peoeis/sites/nen/sandbox/COA2/Pages/home.aspx" accesskey="1"><span class="additional-background"><span class="menu-item-text">COA 2</span><span class="ms-hidden">Currently selected</span></span></a>

                <ul class="static">
                    <li class="static"><a class="static menu-item" href="/peoeis/sites/nen/default.aspx"><span class="additional-background"><span class="menu-item-text">NEN</span></span></a>

                    </li>
                    <li class="static"><span class="static menu-item"><span class="additional-background"><span class="menu-item-text">Services</span></span>
                        </span>
                    </li>
                    <li class="static dynamic-children"><span class="static dynamic-children menu-item"><span class="additional-background"><span class="menu-item-text">Tools</span></span>
                        </span>
                        <ul class="dynamic">
                            <li class="dynamic"><a class="dynamic menu-item new-window" title="Configuration Manager Professional (CMPRO) is the NEN Configuration Management tool. 

CAC Required: YES
NMCI Seat Required: NO
Account Required: YES" href="https://cmpro.cse.spawar.navy.mil" target="_blank"><span class="additional-background"><span class="menu-item-text">NEN CMPRO</span></span></a>

                            </li>
                        </ul>
                    </li>
                    <li class="static dynamic-children"><span class="static dynamic-children menu-item"><span class="additional-background"><span class="menu-item-text">Navy Links</span></span>
               ...

CSS

.menu-container {
    WIDTH: 100%;
    BORDER-TOP: #000000 1px solid;
    FONT-FAMILY: verdana, arial, helvetica, san-serif;
    BORDER-RIGHT: #000000 1px solid;
    BORDER-BOTTOM: #000000 1px solid;
    MARGIN-LEFT: auto;
    BORDER-LEFT: #000000 1px solid;
    DISPLAY: none;
    BACKGROUND-COLOR: #305183;
    MARGIN-RIGHT: auto
}
.menu-inner {
    MARGIN-LEFT: auto;
    WIDTH: 95%;
    MARGIN-RIGHT: auto
}
.menu-title {
    MARGIN-BOTTOM: 15px;
    HEIGHT: 25px;
    BACKGROUND-IMAGE: url(https://navy.deps.mil/peoeis/sites/nen/sandbox/COA2/PublishingImages/front-page-titlebar.png);
    BORDER-BOTTOM: #93865f 1px solid;
    COLOR: #ffffff;
    WIDTH: 100%;
    BACKGROUND-COLOR: #305183
}
.menu-title SPAN {
    DISPLAY: block;
}
.menu-title SPAN#close-panel {
    margin-left:99%;
    border: solid #FFFFFF 1px;
    width:8px;
}
a:link > #close-panel {
    color:#FFFFFF;
}
a:visited > #close-panel {
    color:#FFFFFF;
}
a:hover > #close-panel {
    color:#FFFFFF;
}
.topics-box {
    OVERFLOW: hidden;
    MARGIN-BOTTOM: 10px;
    MAX-WIDTH: 200px;
    VERTICAL-ALIGN: top;
    POSITION: relative;
    MARGIN-LEFT: 20px;
    MARGIN-RIGHT:auto;
    DISPLAY: inline-block;
}
DIV.topics-box > UL {
    LIST-STYLE-TYPE: none;
    FONT-SIZE: 0.95em;
    PADDING-BOTTOM: 0px;
    TEXT-ALIGN: left;
    PADDING-TOP: 0px;
    PADDING-LEFT: 0px;
    MARGIN-LEFT: auto;
    PADDING-RIGHT: 0px;
    MARGIN-RIGHT: auto
}
DIV.topics-box UL LI {
    COLOR: white;
    DISPLAY: block;
}
DIV.topics-box UL LI A {
    HEIGHT: 100%;
    PADDING-BOTTOM: 5px;
    PADDING-TOP: 5px;
    PADDING-LEFT: 0px;
    DISPLAY: block;
    PADDING-RIGHT: 0px;
    WIDTH: 100%
}
DIV.topics-box UL LI A:link {
    COLOR: #FFFFFF;
    TEXT-DECORATION: none;
    WIDTH: 100%
}
DIV.topics-box UL LI A:visited {
    COLOR: #FFFFFF;
    TEXT-DECORATION: none;
    WIDTH: 100%
}
DIV.topics-box UL LI A:hover {
    COLOR: #ffffff;
    TEXT-DECORATION: none;
    WIDTH: 100%
}
DIV.topics-box UL LI:hover {
    BACKGROUND-COLOR:...

JavaScript

var topics = "<li class=\"static dynamic-children\"><a class=\"static menu-item\" href=\"#\"><span class=\"static dynamic-children menu-item\"><span class=\"additional-background\"><span id=\"topic-link\" class=\"menu-item-text\">Topics</span></span></span></a></li>";

var panel = "<div id=\"topic-panel\" class=\"menu-container\"><div class=\"menu-title\"><a href=\"#\"><span id=\"close-panel\">X</span></a></div><div class=\"menu-inner\"><div class=\"topics-box\"><div class=\"topics-title\"><span>Administration</span></div><ul><li><a href=\"#\">Business Relationship Management</a></li><li><a href=\"#\">Customer Engagement</a></li><li><a href=\"#\">NetOps Liason</a></li><li><a href=\"#\">Service Level Management</a></li></ul></div><div class=\"topics-box\"><div class=\"topics-title\"><span>Operations</span></div><ul><li><a href=\"#\">Business Operations</a></li><li><a href=\"#\">KM</a></li><li><a href=\"#\">Legal</a></li><li><a href=\"#\">Program Management</a></li><li><a href=\"#\">Project Management</a></li><li><a href=\"#\">Risk Exchange</a></li></ul></div><div class=\"topics-box\"><div class=\"topics-title\"><span>Manpower</span></div><ul><li><a href=\"#\">Manpower &amp; Personnel</a></li></ul></div><div class=\"topics-box\"><div class=\"topics-title\"><span>Security</span></div><ul><li><a href=\"#\">Cybersecurity</a></li></ul></div><div class=\"topics-box\"><div class=\"topics-title\"><span>Logistics</span></div><ul><li><a href=\"#\">Data Management</a></li><li><a href=\"#\">Facilities Management</a></li><li><a href=\"#\">Logistics</a></li><li><a href=\"#\">Release &amp; Deployment Management</a></li><li><a href=\"#\">Service Asset &amp; Config Management</a></li><li><a href=\"#\">Training</a></li></ul></div><div class=\"topics-box\"><div class=\"topics-title\"><span>Plans &amp; Strategy</span></div><ul><li><a href=\"#\">Availablity, Capacity &amp; Demand Management</a></li><li><a href=\"#\">Change Management</a></li><li><a href=\"#\">Continual Service...