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>
  </ul>
</nav>

CSS

#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(){
    $('.submenu').slideUp();
    $(".mainli").hover(function() {
        $(this).children('.submenu').slideDown("medium");
    },
    function () {
        $(this).children('.submenu').slideUp("medium");
    });
});