JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <a href="#">Test</a>
        <ul>
            <li><a href="#">Test2</a></li>
            <li><a href="#">Test3</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Test</a>
        <ul>
            <li><a href="#">Test2</a></li>
            <li><a href="#">Test3</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Test</a>
        <ul>
            <li><a href="#">Test2</a></li>
            <li><a href="#">Test3</a></li>
        </ul>
    </li>
</ul>

CSS

* {
	padding: 0;
	margin: 0;
	-webkit-transiton: all 0.3s;
	-moz-transition: all 0.3s;
	-ms-transition: all 0.3s;
	-o-transition: all 0.3s;
	transition: all 0.3s;
}

ul {
    list-style: none;
}

ul li {
	display: inline-block;
}

ul li:hover ul {
	max-width: 10000px;
	max-height: 10000px;
}

ul li ul {
	display: inline-block;
	max-width: 0px;
	max-height: 0px;
	
	padding: 0;
	list-style: none;
}