JSFiddle - React, Tailwind, and code Playground

by Gereltod Gotsbayar

HTML

<div class="outer">
    <ul class="mainmenu">
        <li><a href="#">menu 1</a>
            <ul class="submenu">
                <li><a href="#">submenu 1.1</a></li>
                <li><a href="#">submenu 1.2</a></li>
                <li><a href="#">submenu 1.3</a></li>
            </ul>
        </li>
        <li><a href="#">menu 2</a>
            <ul class="submenu">
                <li><a href="#">submenu 2.1</a></li>
                <li><a href="#">submenu 2.2</a></li>
                <li><a href="#">submenu 2.3</a></li>
                <li><a href="#">submenu 2.4</a></li>
                <li><a href="#">submenu 2.5</a></li>
            </ul>
        </li>
        <li><a href="#">menu 3</a></li>
        <li><a href="#">menu 4</a></li>
        <li><a href="#">menu 5</a></li>
        <li><a href="#">menu 6</a></li>
        <li><a href="#">menu 7</a></li>
        <li><a href="#">menu 8</a></li>
        <li><a href="#">menu 9</a></li>
        <li><a href="#">menu 10</a></li>
    </ul>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fermentum massa ac nisl venenatis rutrum. Mauris rutrum lobortis dui et fermentum. Aliquam tempor hendrerit tellus, at luctus ipsum euismod eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus volutpat congue ligula, ut viverra mauris. Praesent sit amet bibendum mauris. Pellentesque dictum eros est, in fermentum felis accumsan eu. Curabitur sodales volutpat adipiscing. Sed vitae magna turpis. Nullam imperdiet eu leo vitae euismod. Etiam vel ante egestas augue posuere suscipit eget convallis odio. Sed a lacus a leo mollis auctor in sed mauris.</p>

<p>Aenean at sollicitudin justo. Donec facilisis diam in lorem egestas pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent tristique ultrices lorem, quis blandit libero hendrerit sed. Morbi consectetur nulla quis eros egestas bibendum. Nulla ac mauris...

CSS

.outer {
    width: 400px;
    height: 200px;
    top: 5px;
    left: 5px;
    position: fixed;
}
.mainmenu {
    width: 200px;
    height: 200px;
    margin: 0px;
    padding: 0px;
    position: relative;
    height: 200px;
    overflow-y: scroll;
}
.mainmenu>li {
    display: block;
    list-style: none;
    background-color: #ccc;
    padding-bottom: 5px;
}
.mainmenu>li>a {
    text-decoration: none;
    color: #444;
    display: block;
    padding-left: 10px;
}
.mainmenu>a:hover {
    background-color: #444;
    color: #eee !important;
}
.submenu {
    display: none;
    position: absolute;
}

JavaScript

$(function(){

    $("ul.mainmenu>li").hover(function(){
        
        $submenu = $(this).children("ul.submenu");
        $(".outer").append($submenu).fadeIn();
    }, function(){
        
        //$(this).children("ul.submenu").hide();        
    });
});