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

#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 {
    display: none;
    float: right;
}

JavaScript

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

    function () {
        $(".submenu", this).slideUp("medium");
    });
});