JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

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

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

            <ul>
                <li><a href="#"> hoverred </a></li>
                <li><a href="#"> hoverred fgsdfs dfsfs </a> </li>
                <li><a href="#"> hoverred</a>
                     <ul>
                      <li><a href="#"> hoverred </a></li>
                      <li><a href="#"> hoverred fgsdfs dfsfs </a></li>
                      <li><a href="#"> hoverred </a></li>
                    </ul>
        </li>
    </ul>
    </li>
    <li><a href="#"> hoverred </a>

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

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

CSS

* {
    padding:0;
    margin:0;
}
.menu ul {
    list-style:none;
    zoom:1;
    font-size:10px;
}
.menu ul > li {
    float:left;
}
.menu ul li {
    position:relative;
}
.menu a {
    position:relative;
    color:black;
    white-space:nowrap;
    padding:15px;
    text-decoration:none;
    background:#dfdfdf;
    display:block;
}
ul ul {
    display:none;
    position:absolute;
}

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

.menu ul li > ul li {
    display:table;
    width:100%;
    clear:both;
    position:relative;
    border-bottom:1px solid red;
}

JavaScript

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

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

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

);