JSFiddle - React, Tailwind, and code Playground

by Fredy Sudhir

HTML

<ul class="main-menu">
    <li> <a href="">Menu 1</a>
        <ul class="sub-menu">
            <li >Sub menu 1.1</li>
            <li>Sub menu 1.2</li>
            <li>Sub menu 1.3</li>
        </ul>
    </li>
    <li><a href="">Menu 2</a>
        <ul class="sub-menu">
            <li>Sub menu 2.1</li>
            <li>Sub menu 2.2</li>
            <li>Sub menu 2.3</li>
        </ul>
    </li>
    <li><a href="">Menu 3</a>
        <ul class="sub-menu">
            <li>Sub menu 3.1</li>
            <li>Sub menu 3.2</li>
            <li>Sub menu 3.3</li>
        </ul>
    </li>
    <li><a href="">Menu 4</a>
        <ul class="sub-menu">
            <li>Sub menu 4.1</li>
            <li>Sub menu 4.2</li>
            <li>Sub menu 4.3</li>
            <li>Sub menu 4.4</li>
        </ul>
    </li>
    <li><a href="">Menu 5</a>
        <ul class="sub-menu">
            <li>Sub menu 5.1</li>
            <li>Sub menu 5.2</li>
            <li>Sub menu 5.3</li>
        </ul>
    </li>
</ul>

CSS

ul{
    list-style:none;
    padding:0;
}
a{
    text-decoration:none;
    display:block;
}

.main-menu{
    width:50%;
    margin-left:15%;
}
.sub-menu{
    max-height:0;
    background-color:#D7D5D5;
    overflow:hidden;
    -webkit-transition: max-height 0.5s ease;
	-moz-transition: max-height 0.5s ease;
	transition: max-height 0.5s ease;
}

.sub-menu li{
    padding: 3px 8px;
}

.main-menu > li > a{
    background-color:#4D4A4A;
    color:#fff;
    border-bottom: 1px solid #3D3B3B;
    border-radius:2px;
    padding: 5px 10px;
    font-size:18px;
}

.main-menu li:hover > ul{
    max-height:200px;
    -webkit-transition: max-height 1s ease;
	-moz-transition: max-height 1s ease;
	transition: max-height 1s ease;
}