JSFiddle - React, Tailwind, and code Playground

HTML

<div id="left-menu" class="left-menu-expanded">
    <div id="cssmenu">
        <ul id="vmenu" class="vmenu-wide">
            <li class="active"> <a href='index.html'><span class="vmlabel">Menu Item #1</span></a></li>
            <li> <a href='index.html'><span class="vmlabel">Menu Item #2</span></a></li>
            <li class="vmdrop dm-arrow"> <a href='#'><span class="vmlabel">Menu Item #3</span></a>
                <ul class="vmenu-dropdown">
                    <li><a href='#'>SubMenu Item #1</a></li>
                    <li><a href='#'>SubMenu Item #2</a></li>
                    <li><a href="#">SubMenu Item #3</a></li>
                    <li><a href="#">SubMenu Item #4</a></li>
                </ul>
            </li>
            <li class="vmdrop dm-arrow"> <a href='#'><span class="vmlabel">Menu Item #4</span></a>
                <ul class="vmenu-dropdown">
                    <li><a href="#">SubMenu Item #1</a></li>
                    <li><a href="#">SubMenu Item #2</a></li>
                    <li><a href="#">SubMenu Item #3</a></li>
                </ul>
            </li>
            <li class="vmdrop dm-arrow"> <a href='#'><span class="vmlabel">Menu Item #5</span></a>
                <ul class="vmenu-dropdown">
                    <li><a href="#">SubMenu Item #1</a></li>
                    <li><a href="#">SubMenu Item #2</a></li>
                    <li><a href="#">SubMenu Item #3</a></li>
                    <li><a href="#">SubMenu Item #4</a></li>
                    <li><a href="#">SubMenu Item #5</a></li>
                    <li><a href="#">SubMenu Item #6</a></li>
                    <li><a href="#">SubMenu Item #7</a></li>
                    <li><a href="#">SubMenu Item #8</a></li>
                    <li><a href="#">SubMenu Item #9</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800);
html{height:100%;}
body{margin:0;padding:0;}
ol,ul{list-style:none;padding:0;}
a{color:#444;text-decoration:none;}
a:visited,a:active,a:focus,a:hover{color:#2b2b2b;text-decoration:none;outline:0;}

#left-menu {background-color:#495064;color:#CCD0D8;}
#vmenu {font-family:"Open Sans",Arial,sans-serif;font-size:14px;}
#vmenu,#vmenu li,#vmenu ul{list-style:none;border:0;margin:0;padding:0;}
#vmenu li{min-height:1px;vertical-align:middle;}
#vmenu li:hover{position:relative;z-index:399;cursor:default;}
#vmenu li>a{display:block;text-decoration:none;padding:15px;}
#vmenu ul{visibility:hidden;position:absolute;top:100%;left:0;z-index:398;min-width:225px;border:1px solid #d1d1d1;border-left:0;-webkit-box-shadow:4px 4px 5px 0px rgba(50, 50, 50, 0.1);-moz-box-shadow:4px 4px 5px 0px rgba(50,50,50,0.1);box-shadow:4px 4px 5px 0px rgba(50,50,50,0.1);}
#vmenu ul,#vmenu ul ul{top:0;left:100%;}
#vmenu li:hover > ul{visibility:visible;}
#vmenu>li>a:link,#vmenu>li>a:visited,#vmenu>li>a:hover,#vmenu>li>a:active{color:#CCD0D8;text-decoration:none;}
.vmenu-dropdown li>a,.vmenu-dropdown li>a:link,.vmenu-dropdown li>a:visited,.vmenu-dropdown li>a:hover,.vmenu-dropdown li>a:active{color:#262626;text-decoration:none;}
.vmenu-dropdown>li>a{line-height:22px;color:#444;border-bottom:1px solid #f1f1f1;font-size:13px;margin:0!important;padding:3px 20px!important; background-color: #fafafa;}
.vmenu-dropdown>li:last-child>a{border-bottom:none;}
.vmenu-dropdown>li>a:hover{background:#e8ecf3;}
.left-menu-expanded,.vmenu-wide{width:225px;}
#vmenu li.active,#vmenu > li:hover{background:#424a5b;}
li.dm-arrow > a:after { content: ' »'; }

JavaScript

$('body').on('mouseenter mouseover', '.vmdrop', function() {
    var subNav = $('.vmenu-dropdown', this);
    
    if (subNav.length) {
        var pos = subNav[0].getBoundingClientRect();
        if (pos.bottom > window.innerHeight) {
            var threshold = pos.top;
            var buffer = 10;
            var diff = window.innerHeight - (pos.bottom + buffer);
            
            if (Math.abs(diff) > threshold) {
                diff = '-' + (threshold + buffer);
            }
            console.log(diff);
            
            if (Math.abs(diff) > 0) {
                subNav.css({ top: diff + 'px' });
            }
        }
    }
});