JSFiddle - React, Tailwind, and code Playground

by Chris Nicholson

HTML

<ul id="root">
    <li><a href="#">Linky</a>
        <ul>
            <li><a href="#">Sub link 1</a></li>
            <li><a href="#">Sub link 1</a></li>
            <li><a href="#">Sub link 1</a></li>
        </ul>
        <ul>
            <li><a href="#">Sub link 1</a></li>
            <li><a href="#">Sub link 1</a></li>
            <li><a href="#">Sub link 1</a></li>
        </ul>
    </li>
    <li><a href="#">Linky</a>
        <ul>
            <li><a href="#">Sub link 1</a></li>
            <li><a href="#">Sub link 1</a></li>
            <li><a href="#">Sub link 1</a></li>
        </ul>
        <ul>
            <li><a href="#">Sub link 1</a></li>
            <li><a href="#">Sub link 1</a></li>
            <li><a href="#">Sub link 1</a></li>
        </ul>
    </li>
</ul>

CSS

#root > li {
    position: relative;
    float: left;
    background: red;
    width: 80px;
}

#root > li a {
    padding: 20px;
    display: inline-block;
}

#root > li > ul {
    display: none;
    position: relative;
    width: 100px;
    background: green;
}

JavaScript

$('#root > li > a').hover(function(){
    $(this).next('ul').show();
}, function(){
    $(this).next('ul').hide();    
});