JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="navNew">
    <li  class="test">
        <a href="#">OPTION</a>
        <ul>
          <li>Suboption -- Hidden</li>
        </ul>
    </li>
</ul>

CSS

.navNew {
    list-style: none;
     *zoom: 1;
     position: relative;
}
.navNew:before,
.navNew:after {
    content: " ";
    display: table;
}
.navNew:after {
    clear: both;
}
.navNew ul {
    list-style: none;
    width: 9em;
}
.navNew a {
    padding: 10px 15px;
    color:#000;
    *zoom: 1;
}
.navNew > li {
    float: left;
    z-index: 200;
}
.navNew > li > a {
    display: block;
    padding:0px 60px 15px 0px;
}

				@media screen and (max-width: 1440px), screen and (max-height:1000px) { 
				.navNew > li > a 
					{
					padding:0px 55px 15px 0px;
					}
				}
				
		.navNew > li > a:after
			{
			content:'';
			width:10px;
			height:7px;
			right:40px;
			top:8px;
			position:absolute;
			display: block;	
			z-index:9999;
			background: url(./images/downarrow.png) no-repeat top left;
			background-size:10px 7px;
			}
							
					
.navNew li ul {
    position: absolute;
    left: -9999px;
    z-index: 100;
    background:#404040;
    width:175px;
    padding:0;
    border-left:1px solid rgba(255,255,255,0.1);
    border-right:1px solid rgba(0,0,0,0.3);
	box-shadow: 2px 2px 4px rgba(0,0,0,0.4);   
}
.navNew li li a {
    display: block;
    position: relative;
    z-index:100;
    color:#fff;
    font-size:12px;
    font-family:arial,helvetica;
    font-weight:700;
    letter-spacing:0;
    padding:12px 20px 12px 20px;
    margin:0;
    border-top:1px solid rgba(255,255,255,0.1);
    border-bottom:1px solid rgba(0,0,0,0.3);
}
.navNew li li li a {
    z-index:200;
}


.navNew li {
    position: relative;
}
.navNew > li.hover > ul {
    left: 0;
}
.navNew li li.hover ul {
    left: 100%;
    top: 0;
}


.navNew li ul li a:hover
		{
		background:rgba(0,0,0,0.4);
		}

JavaScript

$(".navNew li").unbind('mouseenter mouseleave').bind('mouseenter mouseleave', function() {
        $(this).toggleClass('hover');                                       
    });