JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div class="lnk-ctn">
    <a href="#0">Menu</a>
    <div>
        <a href="#0">Work</a>
        <a href="#0">Projects</a>
        <a href="#0">Blog</a>
        <a href="#0">About</a>
        <a href="#0">Store</a>
        <a href="#0">Contact</a>
    </div>
</div>

CSS

body{
    background:#333;
}
div.lnk-ctn{
    display: block;
    width: 400px;
    background:#fff;
    transition: height .3s;
    -webkit-transition: height .3s;
}
div.lnk-ctn > a{
    display:block;
}
div.lnk-ctn > a:hover + div{
    height:108px;
    visibility:visible;
}
div.lnk-ctn > a:hover + div > a{
    opacity:1;
}
div.lnk-ctn > div{
    display:block;
    height:0;
    visibility:hidden;
    transition: height .3s;
    -webkit-transition: height .3s;
}
div.lnk-ctn > div > a{
    display:block;
    opacity:0;
    transition: opacity .3s;
    -webkit-transition: opacity .3s;
    transition-delay: .3s;
    -webkit-transition-delay: .3s;
}