JSFiddle - React, Tailwind, and code Playground

by Dedi Wibisono

HTML

<header>
    <ul class="menu">
        <li><span>Menu Item 1</span>
            <ul>
                <li><a href="#">Submenu Item 1</a></li>
                <li><a href="#">Submenu Item 2</a></li>
                <li><a href="#">Submenu Item 3</a></li>
                <li><a href="#">Submenu Item 4</a></li>
                <li><a href="#">Submenu Item 5</a></li>
            </ul>
        </li>
        <li><span>Menu Item 2</span>
            <ul>
                <li><a href="#">Submenu Item 1</a></li>
                <li><a href="#">Submenu Item 2</a></li>
            </ul>
        </li>
        <li><a href="">Menu Item 3</a></li>
        <li><span>Menu Item 4</span>
            <ul>
                <li><a href="#">Submenu Item 1</a></li>
            </ul>
        </li>        
    </ul>
</header>

CSS

header {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:50px;
    background-color: yellowgreen;
    font-family: sans-serif;
}
a {
    color: yellowgreen;
    text-decoration: none;
}
ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.menu > li {
    float: left;
    line-height: 50px;
    text-align: center;
    color: white;
    width: 150px;
}
li span {
    height: 50px;
    width: 100%;
    display: block;
    background-color: yellowgreen;
    position: relative;
    z-index: 100;
    cursor:pointer;
}
ul.menu > li > a {
    color: white;
}
li > ul {
    background-color: white;
    color: yellowgreen;
    text-align: left;
    -webkit-transform:translateY(-200%);
    -moz-transform:translateY(-200%);
    transform:translateY(-100%);
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}
li > ul > li {
    border: 1px solid yellowgreen;
    border-top: none;
    padding: 0 10px;    
}
li:hover ul {
    opacity: 1;
    -webkit-transform:translateY(0px);
    -moz-transform:translateY(0px);
    transform:translateY(0px) -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}