JSFiddle - React, Tailwind, and code Playground

by JeffreyTaylor

HTML

<ul class="ulOne">
    <li class="title">A) Text Goes Here</li>
        <ul class="myList">
            <li>Subgroup
                    <a href="">My subgrouplink</a>  
            </li>
         </ul>
    </li>
    <li class="title">B) Text Goes Here</li>
        <ul class="myList">
            <li>Subgroup
                    <a href="">My subgrouplink</a>  
            </li>
         </ul>
    </li>
</ul>

CSS

.ulOne {
            width:10em;
}

.myList {
            margin-left:200px;
            display:none;
            width: 15em;
            position: absolute;            
}

.title {
                  background-color:gray;            
                  margin-bottom:3px;
}

JavaScript

$(document).ready(function() {
    $('.title').mouseenter(function(e) {
        $('.myList').show();
    });

    $('.title').mouseleave(function(e) {
        $('.myList').hide();
    });
});