JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <ul class="pureCssMenu pureCssMenum">
        <li class="pureCssMenui"><a class="pureCssMenui" href="#">Menu1</a>

        </li>
        <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Menu2</span><![if gt IE 6]></a>

        <![endif]>
        <!--[if lte IE 6]>
            <table>
                <tr>
                    <td>
                    <![endif]-->
                    <ul class="pureCssMenum">
                        <li class="pureCssMenui"><a class="pureCssMenui" href="#">Submenu1</a>

                        </li>
                        <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Submenu2</span><![if gt IE 6]></a>

                        <![endif]>
                        <!--[if lte IE 6]>
                            <table>
                                <tr>
                                    <td>
                                    <![endif]-->
                                    <ul class="pureCssMenum">
                                        <li class="pureCssMenui"><a class="pureCssMenui" href="#">Submenu3</a>

                                        </li>
                                        <li class="pureCssMenui"><a class="pureCssMenui" href="#">Submenu4</a>

                                        </li>
                                        <li class="pureCssMenui"><a class="pureCssMenui" href="#">Submenu5</a>

                                        </li>
                                    </ul>
                                    <!--[if lte IE 6]>
                                    </td>
                                </tr>
                            </table>
                            </a>
                        <![endif]-->
                        </li>
                    </ul>
                    <!--[if lte IE 6]>
                    </td>
                </tr>
            </table>
            </a>
        <![endif]-->
        </li>
        <li...

CSS

#pcm {
    display:none;
}
ul.pureCssMenu ul {
    display:none
}
ul.pureCssMenu li:hover>ul {
    display:block
}
ul.pureCssMenu ul {
    position: absolute;
    left:-1px;
    top:98%;
}
ul.pureCssMenu ul ul {
    position: absolute;
    left:100%;
    top:-2px;
}
ul.pureCssMenu, ul.pureCssMenu ul {
    margin:0px;
    list-style:none;
    padding:0px 12px 2px 5px;
    background-color:#333333;
    background-repeat:repeat;
    border-color:#cccccc #111111 #111111 #cccccc;
    border-width:1px;
    border-style:solid;
    width:500px;
}
ul.pureCssMenu table {
    border-collapse:collapse
}
ul.pureCssMenu {
    display:block;
    zoom:1;
    float: left;
}

ul.pureCssMenu li {
    display:block;
    margin:2px 0px 0px 2px;
    font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
    outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
    display:block;
    vertical-align:middle;
    background-color:#333333;
    border-width:1px;
    border-color:#333333;
    border-style:solid;
    text-align:left;
    text-decoration:none;
    padding:10px 5px 10px 10px;
    _padding-left:0;
    font:normal 15px Trebuchet MS, Tahoma;
    color: #cccccc;
    text-decoration:none;
    cursor:default;
}
ul.pureCssMenu span {
    overflow:hidden;
}
ul.pureCssMenu li {
    float:left;
}
ul.pureCssMenu ul li {
    float:none;
}
ul.pureCssMenu ul a {
    text-align:left;
    white-space:nowrap;
}
ul.pureCssMenu li.sep {
    text-align:left;
    padding:0px;
    line-height:0;
    height:100%;
}
ul.pureCssMenu li.sep span {
    float:none;
    padding-right:0;
    width:3px;
    height:100%;
    display:inline-block;
    background-color:#cccccc #111111 #111111 #cccccc;
    background-image:none;
}
ul.pureCssMenu ul li.sep span {
    width:100%;
    height:3px;
}
ul.pureCssMenu li:hover {
    position:relative;
}
ul.pureCssMenu li:hover>a {
    background-color:#377D9F;
    border-color:#377D9F;
    border-style:solid;
 ...