JSFiddle - React, Tailwind, and code Playground

by B L Praveen

HTML

<div class="menu_simple">
    <ul >
        <li><a href="#">Link 1</a>
            <ul class="sub-menu">
                <li><a href="#">Sub Link 1</a></li>
                <li><a href="#">Sub Link 2</a></li>
                <li><a href="#">Sub Link 3</a></li>
                <li><a href="#">Sub Link 4</a></li>
                <li><a href="#">Sub Link 5</a></li>
            </ul>
        </li>
        <li><a href="#">Link 2</a>
        </li>
        <li><a href="#">Link 3</a>
        </li>
        <li><a href="#">Link 4</a>
        </li>
        <li><a href="#">Link 5</a>
        </li>
    </ul>
</div>

CSS

html,body{
    height:100%;
    width:100%;
    margin:0;
    padding:0;
} 
div.menu_simple{
     height:100%;
    background-color: #BDBDBD;
    display:inline-block;
 }
.menu_simple ul {
        margin: 0;
        padding: 0;
        width:100px;
        list-style-type: none;
    }
    .menu_simple ul li a {
        text-decoration: none;
        color: white;
        padding: 10.5px 11px;
        
        display:block;
    }
    .menu_simple ul li a:visited {
        color: white;
    }
    .menu_simple ul li a:hover, .menu_simple ul li .current {
        color: white;
        background-color: #5FD367;
    }


.menu_simple ul li ul.sub-menu {
    display:none;
    position:absolute;
    left:100px;
    top:0px;
    background-color:#BDBDBD;
}
.menu_simple ul li:hover ul.sub-menu {
    display:block;
}
.menu_simple > ul li {
    posistion:relative;
}

JavaScript

jQuery('.menu_simple > ul').children().mouseover(function() {
          var link =$(' > a',this);
          var $sub_menu = $('.sub-menu',this); 
           if(typeof $sub_menu != 'undefined') {
          var width = $sub_menu .width();
           var itemHeight = $(this).outerHeight(true);
          var outerHeight = $sub_menu.outerHeight();
          var bodyHeight = $(window).height();
           var scrolltop = $(window).scrollTop();
           var offset = $link.offset();
               offset = offset.top - scrollTop
               maxHeight = bodyHeight - offset;
           var xsHeight = maxHeight - outerHeight;
           var containerMargin = xsHeight - itemHeight;
               $sub_menu.css({marginTop: containerMargin+'px'}); 
               $sub_menu.show();
           }
        });
jQuery('.menu_simple > ul').children().mouseout(function() {
var $sub_menu = $('.sub-menu',this); 
           if(typeof $sub_menu != 'undefined')       {            
              $sub_menu.hide(); 
           }
       });