JSFiddle - React, Tailwind, and code Playground

HTML

<nav id="nav">
<ul class="nav">
	    				<li class="mainli"><a href="" class="selected">Home</a>
	    						<ul class="submenu">
	    						<li>s1111111</li>
	    						<li>a2222222</li>
	    						<li>g3333333</li>
	    						<li>y4444444</li>
	    			</ul>
	    				</li>	
	    				<li class="mainli"><a href="album.html">My Photos</a>
	    				<ul class="submenu">
	    						<li>11111111</li>
	    						<li>22222222</li>
	    						<li>33333333</li>
	    						<li>44444444</li>
	    			</ul>
	    		</li>
	   			<li class="mainli"><a href="travel.html">My Travel</a>
	   				<ul class="submenu">
	    				<li>aaaaaaaaaa</li>
	    				<li>bbbbbbbbbb</li>
	    				<li>cccccccccc</li>
	    				<li>dddddddddd</li>
	    			</ul>
	   			</li>
	    				<li class="mainli"><a href="aboutwork.html">About Work</a>
	    					<ul class="submenu">
	    						<li>rgre1111</li>
	    						<li>estg22</li>
	    						<li>thser3333</li>
	    						<li>rtyr4444</li>
	    					</ul>
	    				</li>
	    				<li class="mainli"><a href="portfolio.html">My Portfolio</a>
	    					<ul class="submenu">
	    						<li>qqqqqqqq</li>
	    						<li>tttttttt</li>
	    						<li>ppppppppp</li>
	    						<li>yyyyyyyyyy</li>
	    					</ul>
	    				</li>
	    				<li class="mainli"><a href="contact.html">Contact Me</a>
	    					<ul class="submenu">
	    						<li>99999999</li>
	    						<li>88888888</li>
	    						<li>77777777</li>
	    						<li>66666666</li>
	    					</ul>
	    				</li>
	  				</ul>
	  				
	    			
				</nav>

CSS

.submenu {
    display: none;
}
#nav {
  
  margin: 30px 10px 0 10px;
  height: 40px;
  
  
  
}

ul {
  width: 100%;
  list-style-type: none;
  margin: 0;
  padding: 0;
  
}



nav li:last-child   {
border-right: 0;
}

nav a {
display: block;
}

nav a:link, nav a:visited {
text-decoration: none;
color: #333;
font-weight: bold;

}

nav a:hover, nav a.selected {
  
  color: #008b00;
  background-color: #800000;
  transition: color .6s;
  -ms-transition: color .6s;
  -webkit-transition: color .6s;
  transition: background-color .3s;
  -ms-transition: background-color .3s;
  -webkit-transition: background-color .3s;
  -moz-transition: background-color .3s;
  width: 100%;
}

li.mainli {
  float: left;
  width: 16.525%;
  text-align: center;
  line-height: 2.5em;
  background-color: #f00;
  border-right: 1px solid #333;
  border-radius: 1px;
}

ul.submenu {
  
float: right;
  
}

JavaScript

$(document).ready(function() {
  $(".mainli").hover(function() {
    $(this).find(".submenu").slideDown("medium");
  },
  function() {
    $(this).find(".submenu").slideUp("medium");
  }
  );
});