JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<div class="menu">
    <ul>
        <li><a href="#">CEHCK </a>

        </li>
        <li><a href="#">CEHCK </a>

            <ul>
                <li><a href="#">CEHCK </a>

                </li>
                <li><a href="#">CEHCK </a>

                </li>
                <li><a href="#">CEHCK </a>

                </li>
                <li><a href="#">CEHCK </a>

                </li>
                <li><a href="#">CEHCK </a>

                    <ul>
                        <li><a href="#">CEHCK </a>

                        </li>
                        <li><a href="#">CEHCK </a>

                        </li>
                        <li><a href="#">CEHCK </a>

                        </li>
                        <li><a href="#">CEHCK </a>

                        </li>
                        <li><a href="#">CEHCK </a>

                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="#">CEHCK </a>

        </li>
        <li><a href="#">CEHCK </a>

            <ul>
                <li><a href="#">CEHCK </a>

                </li>
                <li><a href="#">CEHCK </a>

                </li>
                <li><a href="#">CEHCK </a>

                </li>
                <li><a href="#">CEHCK </a>

                </li>
                <li><a href="#">CEHCK </a>

                </li>
            </ul>
        </li>
        <li><a href="#">CEHCK </a>

        </li>
    </ul>
</div>

CSS

* {
    padding:0;
    margin:0;
}
.menu a {
    font-size:11px;
    text-decoration:none;
    position:relative;
    padding:0 15px;
    color:black;
    display:block;
    background:#dfdfdf;
}
.menu ul {
    line-height:200%;
    list-style:none;
    zoom:1;
}
.menu ul ul {
    float:left;
    border:1px solid red;
    position:absolute;
    display:none;
}

.menu ul ul ul {
    left:100%;
    top:0;
}

.menu > ul {
    float:left;
    clear:both;
}
.menu > ul li {
    position:relative;
    float:left;
}

.menu ul ul li {
    position:relative;
    clear:both;
    white-space:nowrap;
}

JavaScript

$('ul li').has('ul').hover(function () {
    $(this).children('ul').show();
},

function () {
    $(this).children('ul').hide();
});

$('ul').parent('li').children('a').append('+');