JSFiddle - React, Tailwind, and code Playground

by envira

HTML

<nav>
  <ul class="menu">
    <li><a href="#">MENU 1</a>
      <ul>
        <li><a href="#">ONE A</a></li>
        <li><a href="#">ONE B</a></li>
        <li><a href="#">ONE C</a></li>
      </ul>
    </li>
    <li><a href="#">MENU 2</a>
      <ul>
        <li><a href="#">TWO A</a></li>
        <li><a href="#">TWO B</a></li>
        <li><a href="#">TWO C</a></li>
      </ul>
    </li>
    <li><a href="#">MENU 3</a>
      <ul>
        <li><a href="#">THREE A</a></li>
        <li><a href="#">THREE B</a></li>
        <li><a href="#">THREE C</a></li>
      </ul>
    </li>
  </ul>
</nav>

CSS

nav {
    background: rgb(0,102,255);
    border-radius: 0 0 10px 10px;
    min-height: 50px;
    width: 500px;
}
/*style the main menu*/
.menu {
    margin: 0 auto;
    overflow: hidden;
    padding: 0;
    width: 100%;
}
.menu li {
    float: left;
    list-style: none;
    text-align: center;
    width: 33.3%;
}
.menu li a:link, .menu li a:visited {
    background: rgb(51,51,51);
    color: rgb(255,255,255);
    display: block;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 18px;
    padding: 10px 20px;
    text-decoration: none;
}
.menu li a:hover {
    color: rgb(0,204,102);    
}
/*style the sub menu*/
.menu li ul {
    display: inline;
    position: absolute;
    left: 0;
    padding: 0;
    width: 500px;
}
.menu li ul li {
    display: inline;
    float: left;
    text-align: center;
    width: 33.3%;
}
.menu li ul li a:link, .menu li ul li a:visited {
    background: rgb(51,51,51);
}
.menu li ul li a:hover {
}

JavaScript

$(document).ready(

function() {
    $('.menu li ul').hide();
    $('.menu li').hover(function(e) {
        $(this).find('ul').stop(true, true).slideToggle("slow");
    });
});