JSFiddle - React, Tailwind, and code Playground

by kuroir

HTML

<ul id="menu">
    <li><a href="Something">Something</a></li>
    <li class="subnav">
        <a href="Menu">Something v</a>
        <ul>
            <li><a href="#">Something</a></li>
            <li><a href="#">Something</a></li>
            <li><a href="#">Something</a></li>
        </ul>
    </li>
    <li><a href="Something">Something</a></li>
</ul>

CSS

#menu { background:black}
#menu li {display:inline-block !important; line-height:30px;}
#menu li a {color:#FFF !important}
#menu li.subnav {position:relative;}
#menu li.subnav ul {display:none; position:absolute;top: 30px;
background: green;}

JavaScript

$(document).ready(function() {
  $('#menu li.subnav').hover(function() {
    // Stuff to do when the mouse enters the element;
    $('ul:first', this).slideDown();
  }, function() {
    // Stuff to do when the mouse leaves the element;
    $('ul:first', this).slideUp();
  });
});