JSFiddle - React, Tailwind, and code Playground

HTML

<div class="link">
    <ul>
        <li><a href="test">test 1</a></li>
        <li><a class="test" href="test">test 2</a>
            <ul>
                <li><a href="#">test11</li>
                <li><a href="#">test12</li>
                <li><a href="#">test13</li>
            </ul>
        </li>
        <li><a href="test">test 3</a></li>
        <li><a href="test">test 4</a></li>
    </ul>
    </div>

CSS

.link ul {
    background: grey;
}
.link ul li {
    float: left;
    position: relative;
    padding:5px;
}
.link ul ul {
    display: none;
    position: absolute;
    left: auto;
}

.link ul li.hover ul,
.link ul li:hover ul{
    display: block;
}

JavaScript

$(function(){
    $('.link ul li').hover(
        function(){
          $(this).addClass('hover');  
        },function(){
            $(this).removeClass('hover');
    });
});