JSFiddle - React, Tailwind, and code Playground

by bthorn

HTML

<br />
<br />
<br />
<div id="wrap">
    <input type="text" data-flexmenu="flexmenu1" value="dropdown">
    <!--<a href="#" data-flexmenu="flexmenu1">Chose Status</a>-->
</div>
<!--HTML for Flex Drop Down Menu 1-->
<ul id="flexmenu1" class="flexdropdownmenu">
    <li> <a href="#">CCO</a>

        <ul>
            <li><a href="#">Sub Item 3.1a</a>
            </li>
            <li><a href="#">Sub Item 3.2a</a>
            </li>
            <li><a href="#">Sub Item 3.3a</a>
            </li>
            <li><a href="#">Sub Item 3.4a</a>
            </li>
        </ul>
    </li>
    <li> <a href="#">Item Folder 5a</a>

        <ul>
            <li><a href="#">Sub Item 5.1a</a>
            </li>
            <li> <a href="#">Item Folder 5.2a</a>

                <ul>
                    <li><a href="#">Sub Item 5.2.1a</a>
                    </li>
                    <li><a href="#">Sub Item 5.2.2a</a>
                    </li>
                    <li><a href="#">Sub Item 5.2.3a</a>
                    </li>
                    <li><a href="#">Sub Item 5.2.4a</a>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS

.flexdropdownmenu, .flexdropdownmenu ul {
            /*topmost and sub ULs, respectively*/
            font: normal 13px Verdana;
            margin: 0;
            padding: 0;
            position: absolute;
            left: 0;
            top: 0;
            list-style-type: none;
            background: white;
            border: 1px solid black;
            border-bottom-width: 0;
            visibility: hidden;
            display: none;
            /*collapse all sub menus to begin with*/
            box-shadow: 3px 3px 8px #818181;
            /*shadow for CSS3 capable browsers.*/
            -webkit-box-shadow: 3px 3px 8px #818181;
            -moz-box-shadow: 3px 3px 8px #818181;
        }
        .flexdropdownmenu li {
            position: relative;
        }
        .flexdropdownmenu li a {
            display: block;
            width: 160px;
            /*width of menu (not including side paddings)*/
            color: black;
            background: #fae7a9;
            border-bottom: 1px solid black;
            text-decoration: none;
            padding: 4px 5px;
        }
        * html .flexdropdownmenu li {
            /*IE6 CSS hack*/
            display: inline-block;
            width: 170px;
            /*width of menu (include side paddings of LI A*/
        }
        .flexdropdownmenu li a:hover, .flexdropdownmenu li.selected>a {
            background: #F0CE7D;
        }
        .rightarrowclass {
            position: absolute;
            top: 6px;
            right: 5px;
        }
        /* ######### CSS for shadow added to sub menus  ######### */
        .ddshadow {
            position: absolute;
            left: 0;
            top: 0;
            width: 0;
            height: 0;
            background-color: #ccc;
            /* generally should be just a little lighter than the box-shadow color for CSS3 capable browsers */
        }
        .toplevelshadow {
            margin: 5px 0 0 5px;
            /* in NON CSS3 capable...

JavaScript

/* Flex Level Drop Down Menu
 * Created: Jan 5th, 2010 by DynamicDrive.com. This notice must stay intact for usage
 * Author: Dynamic Drive at http://www.dynamicdrive.com/
 * Visit http://www.dynamicdrive.com/ for full source code
 */

//Version 1.1 (Feb 19th, 2010): Each flex menu (UL) can now be associated with a link dynamically, and/or defined using JavaScript instead of as markup.
//Version 1.2 (July 2nd, 2011): Menu updated to work properly in popular mobile devices such as iPad/iPhone and Android tablets.
//Version 1.3 (Nov 28th, 2011): Script now dynamically adds a class of "selected" to the anchor link while its drop down menu is expanded, for easy styling of the anchor link during its "open" state.
//Version 2.0 (April 16th, 2015): Adds mobile friendly, overlay version of menu that's activated in mobile and small screen browsers. Refines drop down menu behaviour when there's neither space to the right nor left to accommodate sub menu; in that case sub menu overlaps parent menu. Requires jquery 1.8+

//Usage: $(elementselector).addflexmenu('menuid', options)
//ie:
//jQuery(document).ready(function($){
//$('a.mylinks').addflexmenu('flexmenu1') //apply flex menu with ID "flexmenu1" to links with class="mylinks"
//})

jQuery.noConflict()

var flexdropdownmenu = {
    arrowpath: 'arrow.gif', //full URL or path to right arrow image
    backarrowpath: 'left.gif', //full URL or path to back arrow image
    animspeed: 200, //reveal animation speed (in milliseconds)
    showhidedelay: [150, 150], //delay before menu appears and disappears when mouse rolls over it, in milliseconds
    mobilemediaquery: "screen and (max-width: 600px)", // CSS media query string that when matched activates mobile menu (while hiding default)

    //***** NO NEED TO EDIT BEYOND HERE
    mobilemql: null,
    startzindex: 1000,
    mobilezindex: 1001,
    ismobile: navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) != null, //boolean check for popular mobile...