JSFiddle - React, Tailwind, and code Playground

by Edbert

HTML

<li class="navigation-bar">
    <ul>About
        <li>Me</li>
        <li>Us</li>
        <li>Them</li>
    </ul>
    <ul>Find
        <li>Me</li>
        <li>Us</li>
        <li>Them</li>
    </ul>
    <ul>Shop
        <li>Shirts</li>
        <li>Pants</li>
        <li>Hats</li>
    </ul>
    <ul>Contact
        <li>Me</li>
        <li>Us</li>
        <li>Them</li>
    </ul>
</li>

CSS

li, ul {
    list-style: none;
}
.navigation-bar {
    width: 100%;
    display: table;
}
.navigation-bar > ul {
    display: table-cell;
    cursor: default;
}
.navigation-bar > ul > li {
    width: 10px;
    cursor: pointer;
    visibility:hidden;
    opacity:0;
    transition:visibility 0s linear 0.5s, opacity 0.5s linear, max-height 0.5s linear;
    max-height: 0;
}
.navigation-bar > ul:hover > li {
    visibility:visible;
    opacity:1;
    transition-delay:0s;
    max-height: 100px;
}