JSFiddle - React, Tailwind, and code Playground

by creativecouple

HTML

<script src="http://creativecouple.github.io/jquery-timing/jquery-timing.min.js"></script>
<ul id="menu">
    <li>This
        <ul>
            <li><a href="#">foo</a></li>
            <li><a href="#">bar</a></li>
            <li>foobar
                <ul><li><a href="#">Dolor</a></li><li><a href="#">sit</a></li></ul>
            </li>
        </ul>
    </li>
    <li>is
        <ul>
            <li>one
                <ul><li><a href="#">Dolor</a></li><li><a href="#">sit</a></li></ul>
            </li>
            <li>two
                <ul><li><a href="#">Dolor</a></li><li><a href="#">sit</a></li></ul>
            </li>
            <li>three
                <ul><li><a href="#">Dolor</a></li><li><a href="#">sit</a></li></ul>
            </li>
        </ul>
    </li>
    <li>a
        <ul>
            <li><a href="#">foo</a></li>
            <li><a href="#">bar</a></li>
            <li>foobar
                <ul><li><a href="#">Dolor</a></li><li><a href="#">sit</a></li></ul>
            </li>
        </ul>
    </li>
    <li>navigation
        <ul>
            <li>one
                <ul><li><a href="#">Dolor</a></li><li><a href="#">sit</a></li></ul>
            </li>
            <li>two
                <ul><li><a href="#">Dolor</a></li><li><a href="#">sit</a></li></ul>
            </li>
            <li>three
                <ul><li><a href="#">Dolor</a></li><li><a href="#">sit</a></li></ul>
            </li>
        </ul>
    </li>
    <li>with
        <ul>
            <li><a href="#">foo</a></li>
            <li><a href="#">bar</a></li>
            <li>foobar
                <ul><li><a href="#">Dolor</a></li><li><a href="#">sit</a></li></ul>
            </li>
        </ul>
    </li>
    <li>nested
        <ul>
            <li>one
                <ul><li><a href="#">Dolor</a></li><li><a href="#">sit</a></li></ul>
            </li>
            <li>two
                <ul><li><a href="#">Dolor</a></li><li><a href="#">sit</a></li></ul>
            </li>
           ...

CSS

#menu {
    display: block;
    position: relative;
    padding: 0;
    margin: 0;
    width: 400px;
}
#menu ul {
    display: none;
    position: absolute;
    left: 10px;
    top: 100%;
    padding: 0;
    margin: 0;
    width: 400px;
}
#menu li {
    float: left;
    padding: 3px;
    margin: 1px;
    background: silver;
    position: relative;
    border: 2px outset silver;
}
#menu li:hover {
    background-color: white;
    border-style: inset;
}

JavaScript

$('#menu li').mouseenter($).unwait().wait(200).children('ul').fadeIn()
    ._.mouseleave($).unwait().wait(300).children('ul').fadeOut();