JSFiddle - React, Tailwind, and code Playground

by justi

HTML

<ul class="menu">
    <li>         
        Thing 1         
        <ul>           
            <li>Subthing A</li>
            <li>Subthing B</li>
            <li>Subthing C</li>
        </ul>
    </li>
    <li>
        Thing 2
        <ul>
            <li>Subthing D</li>
            <li>Subthing E</li>
            <li>Subthing F</li>
        </ul>
    </li>
    <li>
        Thing 3
        <ul>
            <li>Subthing G</li>
            <li>Subthing H</li>
            <li>Subthing I</li>
        </ul>
    </li>
</ul>

CSS

.menu
{
    color:white;
}
ul.menu > :nth-child(1) {
    background: #790606;
}
ul.menu > :nth-child(2) {
    background: #960808;
}
ul.menu > :nth-child(3) {
    background: #C71418;
}

ul.menu li ul li
{
    background: rgba(0, 0, 0, 0.2);
}
ul.menu li ul li:hover
{
    background: rgba(0, 0, 0, 0.4);
}

ul.menu li ul{
    max-height: 0;
    overflow: hidden;
    -moz-transition: max-height 0.5s ease-in-out;
    -webkit-transition: max-height 0.5s ease-in-out;
    -o-transition: max-height 0.5s ease-in-out;
    transition: max-height 0.5s ease-in-out;
    
}
ul.menu li:hover ul {
    max-height: 500px;
}
ul.menu li
{
    float:left;
    line-height:2em;
    
}
ul.menu li
{
    cursor:pointer;
    width:120px;
    text-align:center;
}
ul.menu > li, ul.menu li ul li
{
    border:1px solid white;}

ul.menu > li
{
    /*position:relative;*/
    border-right:none;
    border-left:none;
}
ul.menu li ul li
{
    /*position:relative;*/
    border-bottom:none;
    border-left:none;
}

JavaScript

function countdown(num) {
    var intervalId = null;
    var i = num;

    intervalId = setInterval(function() {
        alert(i);

        --i;
        if (i < 0) {
            clearInterval(intervalId);
        }

    }, 1000);
}
//countdown(2);