JSFiddle - React, Tailwind, and code Playground

by karinafoto

HTML

<ul id="qm0" class="qmmc">

    <li><a class="qmparent" href="javascript:void(0)">Who We Are</a>

        <ul>
        <li><a href="javascript:void(0)">Management</a></li>
        <li><a class="qmparent" href="javascript:void(0)">Global Sites</a>

            <ul>
            <li><a href="#">Asia</a></li>
            <li><a href="#">South America</a></li>
            <li><a href="#">Australia</a></li>
            <li><a href="#">North America</a></li>
            <li><a href="#">Europe</a></li>
            <li><a href="#">Africa</a></li>
            </ul></li>

        <li><a class="qmparent" href="javascript:void(0)">Investors</a>

            <ul>
            <li><a href="javascript:void(0)">Asia</a></li>
            <li><a href="javascript:void(0)">South America</a></li>
            <li><a href="javascript:void(0)">Australia</a></li>
            <li><a href="javascript:void(0)">North America</a></li>
            <li><a href="javascript:void(0)">Europe</a></li>
            <li><a href="javascript:void(0)">Africa</a></li>
            </ul></li>

        <li><a href="javascript:void(0)">Worldwide</a></li>
        <li><a href="javascript:void(0)">Product Overview</a></li>
        <li><a href="javascript:void(0)">Publicity</a></li>
        </ul></li>

    <li><a class="qmparent" href="javascript:void(0)">Our Commitment</a>

        <ul>
        <li><a href="javascript:void(0)">Satisfaction</a></li>
        <li><a href="javascript:void(0)">Our Goals</a></li>
        <li><a href="javascript:void(0)">Product Warranty</a></li>
        <li><a href="javascript:void(0)">Future Outlook</a></li>
        <li><a href="javascript:void(0)">Product Quality</a></li>
        <li><a href="javascript:void(0)">Continued Support</a></li>
        </ul></li>

    <li><a class="qmparent" href="javascript:void(0)">Our Investors</a>

        <ul>
        <li><a href="javascript:void(0)">Annual Meetings</a></li>
        <li><a href="javascript:void(0)">Financial Reports</a></li>
       ...

CSS

<!--%%%%%%%%%%%% MyCSSMenu Styles [Keep in head for full validation!] %%%%%%%%%%%-->
<style type="text/css">


/*!!!!!!!!!!! MyCSSMenu Core CSS [Do Not Modify!] !!!!!!!!!!!!!*/
.qmmc .qmdivider{display:block;font-size:1px;border-width:0px;border-style:solid;position:relative;z-index:1;}.qmmc .qmdividery{float:left;width:0px;}.qmmc .qmtitle{display:block;cursor:default;white-space:nowrap;position:relative;z-index:1;}.qmclear {font-size:1px;height:0px;width:0px;clear:left;line-height:0px;display:block;float:none !important;}.qmmc {position:relative;zoom:1;z-index:10;}.qmmc a, .qmmc li {float:left;display:block;white-space:nowrap;position:relative;z-index:1;}.qmmc div a, .qmmc ul a, .qmmc ul li {float:none;}.qmsh div a {float:left;}.qmmc div{visibility:hidden;position:absolute;}.qmmc li {z-index:auto;}.qmmc ul {left:-10000px;position:absolute;z-index:10;}.qmmc, .qmmc ul {list-style:none;padding:0px;margin:0px;}.qmmc li a {float:none}.qmmc li:hover>ul{left:auto;}#qm0 ul {top:100%;}#qm0 ul li:hover>ul{top:0px;left:100%;}


/*!!!!!!!!!!! MyCSSMenu Styles !!!!!!!!!!!*/


    /* MyCSSMenu 0 */

    /*"""""""" (MAIN) Container""""""""*/    
    #qm0    
    {    width:510px;
        background-color:red;
    }


    /*"""""""" (MAIN) Items""""""""*/    
    #qm0 a    
    {    
        padding:5px 40px 5px 8px;
        margin:0px 5px 0px 0px;
        color:#FFFFFF;
        font-family:Arial;
        font-size:12px;
        text-decoration:none;
        border-width:1px;
        border-style:none;
        background:blue;
    }


    /*"""""""" (MAIN) Active State""""""""*/    
    body #qm0 .qmactive, body #qm0 .qmactive:hover    
    {    
        color:red;
        text-decoration:underline;
    }


    /*"""""""" (SUB) Container""""""""*/    
    #qm0 div, #qm0 ul    
    {    
        padding:8px;
        margin:-1px 0px 0px;
        background-color:black;
        border-width:1px;
        border-style:none;
        border-color:#000000;border-radius:5px;
    }


   ...